原生javaScript實現Ajax 和 jQuery實現Ajax

做者後臺使用的是 php語言，因此這裏以php後臺Api爲例子,不影響學習Ajax

1、 javaScript原生使用Ajax

1.get方法

//1.建立對象 兼容處理
var xhr = null;
//處理低版本IE不兼容問題
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.準備發送 請求方式  接口    參數名    參數值        異步
xhr.open('get','xxx.php?username=' + usernameValue ,true);
//3.執行發送
xhr.send(null);
//4.回調
xhr.onreadystatechange = function () {
    /*xhr.readyState == 4  是表示數據解析完成，後臺處理完成了。
       xhr.status == 200 是表示處理的結果是OK的。響應成功*/
    if (xhr.readyState == 4){
        if(xhr.status == 200){
            //返回結果
            var result = xhr.responseText;
            console.log(result); 
        }
    }
};

2.post方法

//#1.建立對象 兼容性
var xhr = null;
//處理低版本IE不兼容問題
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
//#2.準備發送
xhr.open('post','xxx.php',true);
// 參數
var param = 'phone=' + phoneValue;
//設置響應頭
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//#3.執行發送
xhr.send(param);

//#4.回調函數
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4){
        if(xhr.status ==200){
            var result = xhr.responseText;
            console.log(result);
        }
    }
}

open()方法後面的參數 true和 false,表示異步和同步， 同步(false)就是先吃完飯才能看電視，異步(true)就是邊吃飯邊看電視**

2、 jQuery中的使用Ajax

1.基本使用方法

$.ajax({
    url: 'xxx.php',
    type: 'get',
    beforeSend: function(xhr){
        console.log(xhr);
    },
    success: function (res) {
        console.log(res);
    },
    error:function (xhr) {
        console.log(xhr);
    },
    complete:function (xhr) {
        console.log(xhr);
    }
});

post方式只需把type值改爲 get就行

2.快捷方式

$.get('xxx.php',{id:1},function (res) {
    console.log(res);
});

$.post('xxx.php',{id:1},function (res) {
    console.log(res);
});

以上是get和post兩種方式

3.解析Json格式

$.getJSON('xxx.php',{id:1},function (res) {
    console.log(res);
});

或者在放置json格式文件的php中進行申明頭部

<?php
$zhangsan = array(
    'name' => '張三',
    'age'  => 18
);
//格式
header('Content-Type:application/json');
echo json_encode($zhangsan);
?>