Ajax请求的步骤

Ajax -------------- Asynchronous JavaScript & XML
ajax请求与普通请求的区别：

ajax通过XMLHttpRequest对象请求服务器服务器接受请求返回数据实现刷新交互，
普通http请求通过httpRequest对象请求服务器接受请求返回数据需要页面刷新。

AJAX请求头会多一个x-requested-with参数，值为XMLHttpRequest

1. ajax-get方式的请求步骤：

// 1. 创建异步对象
var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();//标准
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE6
}

// 2. 设置 请求行 open(请求方式，请求url):
var param = 'username=' + uname + '&password=' + pw;
xhr.open('get','03get.php?' + encodeURI(param), true);

// 3. 设置请求（GET方式忽略此步骤）头

// 4. 设置请求体 send() , get的参数在url拼接了，所以不需要在这个函数中设置
xhr.send(null);

// 5. 让异步对象接收服务器的响应数据, 即指定回调函数，该函数调用的条件就是readyState状态发生变化（不包括从0变为1）
// 成功的响应要满足两个条件：
	// 1.服务器成功响应了，即状态码是200 
	// 2.异步对象的响应状态为4(数据解析完毕可以使用了)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){ 
	console.log(xhr.responseText); 
	document.querySelector(".show").innerHTML = xhr.responseText;;
 }
 }

其中.open()中的参数为：

• 参数一：请求方式（get获取数据；post提交数据）
• 参数二：请求地址
• 参数三：同步或者异步标志位，默认是true表示异步，false表示同步
  如果是get请求那么请求参数必须在url中传递。encodeURI()用来对中文参数进行编码，防止乱码

2. ajax-post方式的请求步骤：

// 1. 创建异步对象
var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();//标准
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE6
}

// 2. 设置 请求行 open(请求方式，请求url):
var param = 'username=' + uname + '&password=' + pw;
xhr.open('post','04post.php',false);

// 3. 设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

// 4. 设置请求体 send()
xhr.send(param); //post请求参数在这里传递，并且不需要转码

// 5. 让异步对象接收服务器的响应数据
xhr.onreadystatechange = function(){
// 判断服务器是否响应，判断异步对象的响应状态
if( xhr.readyState == 4 && xhr.status == 200 ){
 document.querySelector(".show").innerHTML = xhr.responseText;
 }
 }

其中：
readyState状态码的含义是：

• 0 表示xhr对象创建完成
• 1 表示已经发送了请求
• 2 表示浏览器已经收到了服务器响应的数据
• 3 表示正在解析数据
• 4 数据已经解析完成，可以使用了， 但是这个数据不一定是正常的

http状态码（status）：

• 200：（成功） 表示服务器返回的数据是正常的

• 403：（禁止）服务器拒绝请求

• 404：（未找到）服务器找不到请求的页面

• 408：（请求超时）服务器等候请求发生超时

• 500：（服务器内部错误）服务器遇到错误，无法完成请求

3. 一个简易的ajax封装

function ajax(url,type,param,dataType,callback){

    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    
    if(type == 'get'){
        url += "?" + param;
    }
    
    xhr.open(type,url,true);

    var data = null;
    if(type == 'post'){
        data = param;
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    
    xhr.send(data);
    
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                var data = xhr.responseText;
                if(dataType == 'json'){
                    data = JSON.parse(data);
                }
                callback(data);
            }
        }
    }
}

4. JQuery中的ajax

$.ajax({
 type:"get",// get或者post
 url:"abc.php",// 请求的url地址
 data:{},//请求的参数
 dataType:"json",//json写了jq会帮我们转换成数组或者对象 他已经用JSON.parse弄好了。 类型有xml json text html script jsonp
 timeout:3000,//3秒后提示错误
 beforeSend:function(){ 
 // 发送之前就会进入这个函数
 // return false 这个ajax就停止了不会发 如果没有return false 就会继续
 },
 success:function(data){ // 成功拿到结果放到这个函数 data就是拿到的结果
 },
 error:function(){//失败的函数
 },
 complete:function(){//不管成功还是失败 都会进这个函数
 }
})

$.ajax({
 type:"get",
 url:"",
 data:{},
 dataType:"json",
 success:function(data){
 }
})

注意：

$.ajax()  //都可以发

$.post(url,data,success,datatype) // 本质上只能发送post请求

$.get(url,data,success,datatype) // 本质上只能发送get请求

参考： https://blog.csdn.net/qq_32252957/article/details/84348155