JavaScript Ajax-CSDN博客

一、认识Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。功能：在不刷新页面的情况下，实现与后台的数据交互。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 Ajax技术核心是XMLHttpRequest对象(简称XHR)。
Ajax不能跨域，浏览器的同源策略。要想跨域，可以使用jsonp，或者后台开放端口。

二、MLHttpRequest 对象方法

新建一个Ajax对象：new XMLHttpRequest();。ie 6以下版本new ActiveXObject('Msxml2.XMLHttp.3.0')或 new ActiveXObject('Msxml2.XMLHTTP.6.0')。

new XMLHttpRequest() || new ActiveXObject('Msxml2.XMLHTTP.3.0')||new ActiveXObject('Msxml2.XMLHTTP.6.0'); 
复制代码

打开资源：open(method, url, asynch, [username],[password])。指定和服务器端交互的HTTP方法，URL地址，即其他请求信息。method：http请求方法，一般使用”GET“,”POST“.。url：请求的服务器的地址。asynch：是否采用异步方法，true为异步，false为同步，默认是异步。后边两个可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。
GET请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL的末尾，以便提交给服务器。URL的长度是有限制的，所以不能发送大量数据。特殊字符(eg:&等)，传参产生的问题可以使用encodeURIComponent()进行编码处理，中文字符的返回及传参，可以将页面保存和设置为utf-8格式即可。或者使用提交url通用方法。

xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);
复制代码

POST请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是使用的POST传输方式。 xhr.open(‘post’, ‘demo.php’, true);。而发送POST请求的数据，不会跟在URL的尾巴上，而是通过send()方法向服务器提交数据xhr.send(‘name=Lee&age=100’);。一般来说，向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
复制代码

setRequestHeader(String header,String Value)如果是POST方式，需要设置请求头。设置HTTP请求中的指定头部header的值为value。此方法需在open方法以后调用，一般在post方式中使用。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
复制代码

send(data)：向服务器发出请求，如果采用异步方式，该方法会立即返回。data可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串。
Abort()：停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。

三、XMLHttpRequest对象属性

onreadystatechange：请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）。
readyState：表示XMLHttpRequest对象的状态。0：未初始化。XMLHttpRequest对象已创建，未调用open。1：open方法成功调用，但send方法未调用。2：send方法已经调用，尚未开始接受数据。3：正在接受数据。Http响应头信息已经接受，但尚未接收完成。4：响应数据接受完成。
response | responseText | responseXML。response：后台返回什么就是什么。responseText：responseType设置的是''或者'text'，服务器响应的文本内容。responseXML：服务器响应的XML内容对应的DOM对象。
status：服务器返回的http状态码。200表示“成功”， 404表示“未找到”， 500表示“服务器内部错误”等。通过xhr.getResponseHeader(“Content-Type”);可以获取单个响应头信息。xhr.getAllResponseHeaders();获取整个响应头信息。

var xhr = new XMLHttpRequest();//只能通过 new XMLHttpRequest
console.log(xhr);
console.log(xhr.readyState);

xhr.open("GET",'/test.php?user=emmmm&age=18');//打开一个连接
console.log(xhr.readyState);
//xhr.responseType = 'text';

xhr.onreadystatechange = function () {
    console.log(this.readyState);//准备状态
    console.log(this.status);//http状态码
    console.log(this.response);//后台给你返回的数据
    //数据传输完毕，可以正常使用
    if(this.readyState === 4){
        if(this.status >= 200 && this.status < 300 || this.status === 304){
            console.log(this.response)
        }
    }
}
xhr.send();//发送
复制代码

//test.php
<?php

//php 会把get的数据存在 $_GET
var_dump($_GET);
复制代码

var _data = 'user=xxxx&age=18';//这是post需要发送的数据{ name:xxx, age:18 }需要自己打包数据
var xhr = new XMLHttpRequest();//实例化XMLHttpRequest请求

xhr.open('POST','/testpost.php');//打开一个连接

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

xhr.send(_data);//发送


xhr.onreadystatechange = function(){
    if(this.readyState === 4){
        if(this.status >= 200 && this.status < 300 || this.status === 304){
            console.log(this.response);
        }
    }
}
复制代码

//testpost.php
<?php

//php会把post数据保存在$_POST里面
var_dump($_POST);
复制代码

四、Ajax封装

//调用
ajax({
    url : '/test.php',
    type : 'post',
    data : {
        user : '韩梅梅',
        age : 18
    },
    success : function (data) {
        //JSON.parse 字符串转 json数据
        //JSON.stringify
        //console.log(data);
        console.log(data)
    }
});


/*
*   ajax 方法
 *       options 配置信息
* */
function ajax(options) {

    //http 请求类型
    options.type = /post/i.test(options.type) ? 'POST' : 'GET';
    //console.log( options.type);

    //异步或者同步
    options.async = options.async===false ? false : true;
    /*console.log(options.async)*/

    var xhr = new XMLHttpRequest();//实例化一个XMLHttpRequest对象

    var data = '';//user=韩梅梅&age=18
    for(var k in options.data){
        data+=k+'='+ encodeURIComponent(options.data[k])+'&';
    }

    //console.log(data);
    //是get还是post
    if(options.type === 'GET'){

        //get 参数是写在url上面的
        if(!/\?/.test(options.url)){
            options.url+='?';
        }else{
            if(!/(&\s*)$/.test(options.url)){
                options.url+='&';
            }
        }

        //加上时间避免缓存
        options.url += data+'_='+new Date().getTime();
        data = null;
    }
    //console.log(options.url)

    //打开一个连接
    xhr.open(options.type,options.url,options.async);

    //请求头
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');

    //监听状态发送改变
    xhr.onreadystatechange = function(){
        if(this.readyState === 4){//0 1 2 3 4
            if(this.status >= 200 && this.status < 300 || this.status===304){
                //成功函数
                options.success && options.success.call(this,strJsonCode(this.response));
            }else{
                //失败函数
                options.error && options.error.call(this,this.status);
            }
        }
    };

    xhr.send(data);//发送 post需要传到send
}


//将字符串打包成json数据，打包失败，默认返回原字符串
function strJsonCode(str) {

    try {//写有可能报错的代码
        return JSON.parse(str);
    }catch (e) {//报错之后会执行的代码
        return str;
    }
}
复制代码

<?php

//$_GET
//exit(json_encode($_GET));
//exit('你好么！');

exit(json_encode(array(
    'get' => $_GET,
    'post' => $_POST
)));
复制代码

五、jsonp

jsonp是一种数据的传输技巧，解决Ajax跨域的问题，src没有跨域问题。
p是填充的意思,json的填充。jsonp返回的数据形式是callback({age:30,name:'二狗'})而不是{age:30,name:'二狗'}是用括号包裹，前面的名称就是‘填充’，也就是jsonp的p。因为script接受的数据如果是一个json没办法保存，而调用一个函数,{}数据作为实参传递,这样就可以拿到json中的数据。

<script type="text/javascript">
    function jQuery11020815081152774352_1530968010825(data){
        console.log(data)
</script>
<script type="text/javascript" src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=%E5%85%BB%E7%8C%AA%20&json=1&p=3&sid=1466_21100_20927&req=2&csor=3&pwd=%E5%85%BB%E7%8C%AA&cb=jQuery11020815081152774352_1530968010825&_=1530968010835"></script>
复制代码

jsonp前端代码看起来像这样。

<script>
    function callback(data){ //定义接收数据的处理函数
        console.log( data);
    }
</script>
<script src='./jsonp.php?jsonp=callback'></script>
//我需要后台返回一个callback({数据})这样的一个值，实质就是调用上面的函数
复制代码

jsonp中jsonp.php后台中的代码。

<?php
    $val = $_GET['jsonp'];//获取jsonp的值：callback,
    $arr = array(
        "name"=>"二狗",
        "age"=>50
    );//php中的json
    echo $val."(".json_encode($arr).")";//JSON对象进行转字符串处理
    //就是返回 callback({name:'二狗'，age:50})
?>
复制代码