作者背景运用的是
php言语，所以这里以php背景Api为例子,不影响进修Ajax

一、 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)就是边用饭边看电视**

二、 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);
?>