AJAX

一.前言

本文將從下面幾個(gè)方面來了解AJAX的使用方法

  • GET和POST請(qǐng)求
  • JSON
  • AJAX流程
  • jQuery中的AJAX
  • 處理跨域問題

二.GET和POST請(qǐng)求

想學(xué)習(xí)AJAX，就必須先了解GET請(qǐng)求和POST請(qǐng)求。

GET與POST的區(qū)別
  1. GET請(qǐng)求的數(shù)據(jù)會(huì)附在URL之后。
  2. GET請(qǐng)求數(shù)據(jù)有大小限制，POST不限制大小。
  3. GET的安全性要比POST的安全性低。
GET請(qǐng)求

這里使用form表單來進(jìn)行提交

  • html代碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <!-- 要向服務(wù)器發(fā)送數(shù)據(jù)必須使用form表單，使用get方法-->
    <form action="get.php" method="get">
        <!-- 使用name來傳遞數(shù)據(jù) -->
        <input type="text" name="user" />
        <!-- 數(shù)據(jù)提交 -->
        <input type="submit" value="發(fā)送請(qǐng)求" />
    </form>

</body>
</html>
  • php代碼
<?php 
    //使用utf8編碼格式（如不設(shè)置，輸入中文時(shí)，瀏覽器將無法正確解析中文）
    header('Content-type:text/html;charset=utf8');
    // 使用$_GET獲取數(shù)據(jù)
    echo "hello $_GET[user]";
 ?>
POST請(qǐng)求

POST請(qǐng)求與GET請(qǐng)求的用法基本相同

  • html代碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <!-- 要向服務(wù)器發(fā)送數(shù)據(jù)必須使用form表單，使用post方法 -->
    <form action="post.php" method="post">
        <!-- 使用name來傳遞數(shù)據(jù) -->
        <input type="text" name="user" />
        <!-- 數(shù)據(jù)提交 -->
        <input type="submit" value="發(fā)送請(qǐng)求" />
    </form>

</body>
</html>
  • php代碼
<?php 
    //使用utf8編碼格式（如不設(shè)置，輸入中文時(shí)，瀏覽器將無法正確解析中文）
    header('Content-type:text/html;charset=utf8');
    // 使用$_POST獲取數(shù)據(jù)
    echo "hello $_POST[user]";
 ?>

三.JSON

JSON語法規(guī)則
  1. 書寫格式
    名稱 : 值
    "user":"yimi"
  2. JSON值與對(duì)于的符號(hào)
  • 數(shù)字（整數(shù)或浮點(diǎn)數(shù)）
  • 字符串（在雙引號(hào)中）
  • 邏輯值（true 或 false）
  • 數(shù)組（在方括號(hào)中）
  • 對(duì)象（在花括號(hào)中）
  • null
  1. JSON對(duì)象
    對(duì)象中可以包含多個(gè)名稱和值 ---- {在花括號(hào)中寫}
    { "user":"yimi" , "password":"123" }
  2. JSON數(shù)組
    JSON 數(shù)組可包含多個(gè)對(duì)象 ---- [在方括號(hào)中書寫]
{
"students": [
{ "id":"001" , "name":"yimi" },
{ "id":"002" , "name":"shan" }
]
}
  1. 通過JS賦值
var students = [
{ "id":"001" , "name":"yimi" },
{ "id":"002" , "name":"shan" }
];
JSON使用

前面做了那么多的鋪墊，就是下面的兩個(gè)方法，這是JSON中很重要的方法，特別是在數(shù)據(jù)傳遞的時(shí)候，這兩個(gè)方法經(jīng)常被使用。

  1. 將字符串轉(zhuǎn)換成JSON對(duì)象
    var obj = JSON.parse(jsonstr);
  2. 將JSON對(duì)象轉(zhuǎn)換成字符串
    var str = JSON.stringify(jsonobj);

四.AJAX流程

AJAX用于實(shí)現(xiàn)異步加載

AJAX使用流程及記憶方法

此記憶方法可能不算好，如果覺得不適合你，可以另外重新想一個(gè)。

  1. new XMLHttpRequest(); --- 收到一個(gè)新的快遞
  2. open('Methor',url,true) --- 你迫不及待地打開
  3. send(); --- 發(fā)現(xiàn)你的東西有問題，就給送回去了
  4. function onload(){} --- 賣家處理你的快遞
  5. responseText --- 處理后，再把快遞給你返回來
GET請(qǐng)求
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        //創(chuàng)建一個(gè)ajax對(duì)象
        var xhr = new XMLHttpRequest();
        //第一個(gè)參數(shù)：采用post/get形式請(qǐng)求
        //第二個(gè)參數(shù)：選擇要連接的網(wǎng)址
        //第三個(gè)參數(shù)：是否發(fā)起異步請(qǐng)求，一般為true，也可以不寫，默認(rèn)為true。
        xhr = open('GET','ajax.php',true);
        //將數(shù)據(jù)發(fā)送給服務(wù)器（GET請(qǐng)求一般為null）
        xhr = send(null);
        //ajax請(qǐng)求成功后的回調(diào)
        xhr.onload = function(){
            //服務(wù)器返回的數(shù)據(jù),請(qǐng)求之前為空
            console.log(xhr.responseText);
        }
    </script>
</body>
</html>
POST請(qǐng)求
  <script type="text/javascript">
        //創(chuàng)建一個(gè)ajax對(duì)象
        var xhr = new XMLHttpRequest();
        //第一個(gè)參數(shù)：采用post/get形式請(qǐng)求
        //第二個(gè)參數(shù)：選擇要連接的網(wǎng)址
        //第三個(gè)參數(shù)：是否發(fā)起異步請(qǐng)求，一般為true，也可以不寫，默認(rèn)為true。
        xhr = open('POST','ajax.php',true);
        //設(shè)置Content-Type,以告知服務(wù)器實(shí)體中有參數(shù) 
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //將數(shù)據(jù)發(fā)送給服務(wù)器（括號(hào)里面為你要傳遞到服務(wù)器的數(shù)據(jù)）
        xhr = send("user="+username);
        //ajax請(qǐng)求成功后的回調(diào)
        xhr.onload = function(){
            //服務(wù)器返回的數(shù)據(jù),請(qǐng)求之前為空
            console.log(xhr.responseText);
        }
    </script>
文件上傳
<body>
    <!-- 設(shè)置 enctype="multipart/form-data" -->
    <form id="regForm" enctype="multipart/form-data">
        <input type="text" name="user"/><br />
        <input type="password" name="pwd"/><br />
        <a class="upload">
            <input type="file" name="icon"/>
        </a>
        <input type="button" onclick="reg()" value="立即注冊(cè)" />
    </form>

    <script type="text/javascript">
        function reg(){
            var regForm = document.getElementById('regForm');
            var formData = new FormData(regForm);

           var reg_api = 'reg.php' ;
           var xhr = new XMLHttpRequest();
           xhr.open('POST',reg_api,true);
           // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');不需要設(shè)置Content-Type
           xhr.send(formData);
           xhr.onload = function(){
                //json字符串
                var jsonStr = xhr.responseText;
                //將json字符串轉(zhuǎn)換為json對(duì)象
                var obj = JSON.parse(jsonStr);
                alert(obj.message);
           }
        }
    </script>
</body>

五.jQuery中的AJAX

jQuery中的GET方法
  • HTML代碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <button id="btn">發(fā)送一個(gè)ajax請(qǐng)求</button>
    <div id="box"></div>

    <script type="text/javascript">
        $('#btn').click(function(event) {
            //第一個(gè)參數(shù):要鏈接的網(wǎng)址
            //第二個(gè)參數(shù)：要發(fā)送的數(shù)據(jù)
            //第三個(gè)參數(shù)：回調(diào)函數(shù)
            $.get('jq_get.php',{'user':'yimi'}, function(data) {
                $('#box').html(data);
            });
        });
    </script>
</body>
</html>
  • php代碼
<?php 
    var_dump($_GET);
 ?>
  • 輸出結(jié)果

array (size=1)
'user'=>string'yimi'(length=4)

jQuery中的POST方法
  • HTML主要代碼
<body>
    <button id="btn">發(fā)送一個(gè)ajax請(qǐng)求</button>
    <div id="box"></div>
 <script type="text/javascript">
        $('#btn').click(function(event) {
            //第一個(gè)參數(shù):要鏈接的網(wǎng)址
            //第二個(gè)參數(shù)：要發(fā)送的數(shù)據(jù)
            //第三個(gè)參數(shù)：回調(diào)函數(shù)
            $.post('jq_post.php', {'user':'yimi','pwd':'123456'}, function(data) {
               $('#box').html(data)
            });
        });
 </script>
</body>
  • php代碼
<?php 
    var_dump($_POST);
 ?>
  • 輸出結(jié)果

array (size=2)
'user'=>string'yimi'(length=4)
'pwd'=>string'123456'(length=6)

jQuery中的JAJAX方法
  • HTML主要代碼
<body>
    <button id="btn">發(fā)送一個(gè)ajax請(qǐng)求</button>
    <div id="box"></div>

    <script type="text/javascript">
        $('#btn').click(function(event) {
            $.ajax({
                url: 'jq_ajax.php',//要鏈接的地址
                type: 'POST',//請(qǐng)求可以是post，也可以是get
                dataType: 'html',//返回html數(shù)據(jù)
                data: {'user': 'yimi','pwd':'123456'},//要發(fā)送的數(shù)據(jù)
            })
            //成功的回調(diào)函數(shù)
            .done(function(data) {
                console.log("success");
                $('#box').html(data);
            })
            //失敗的回調(diào)函數(shù)
            .fail(function() {
                console.log("error");
            })
            //成功或失敗都會(huì)執(zhí)行的函數(shù)
            .always(function() {
                console.log("complete");
            });
        });
    </script>
</body>
  • php代碼
<?php 
    var_dump($_POST);
 ?>
  • 輸出結(jié)果

array (size=2)
'user'=>string'yimi'(length=4)
'pwd'=>string'123456'(length=6)

六.處理跨域問題

利用XHR2的方法來實(shí)現(xiàn)跨域處理（ie10以下不支持）
只需在php代碼中加入以下代碼即可

header("Access-Control-Allow-Origin:*");//*號(hào)表示允許所有域訪問
header("Access-Control-Allow-Methods:POST,GET");//請(qǐng)求

By : Yimi-shan

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容