JavaScript Ajax

  • 2019-06-15
  • 125
  • 0
  • 0

一、认识Ajax

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

二、MLHttpRequest 对象方法

  1. 新建一个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'); 
  1. 打开资源:open(method, url, asynch, [username],[password])。指定和服务器端交互的HTTP方法,URL地址,即其他请求信息。method:http请求方法,一般使用”GET“,”POST“.。url:请求的服务器的地址。asynch:是否采用异步方法,true为异步,false为同步,默认是异步。后边两个可以不指定,username和password分别表示用户名和密码,提供http认证机制需要的用户名和密码。
  2. GET请求是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以将查询字符串参数追加到URL的末尾,以便提交给服务器。URL的长度是有限制的,所以不能发送大量数据。特殊字符(eg:&等),传参产生的问题可以使用encodeURIComponent()进行编码处理,中文字符的返回及传参,可以将页面保存和设置为utf-8格式即可。或者使用提交url通用方法。
xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);
  1. 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');
  1. setRequestHeader(String header,String Value)如果是POST方式,需要设置请求头。设置HTTP请求中的指定头部header的值为value。此方法需在open方法以后调用,一般在post方式中使用。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  1. send(data):向服务器发出请求,如果采用异步方式,该方法会立即返回。data可以指定为null表示不发送数据,其内容可以是DOM对象,输入流或字符串。
  2. Abort():停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。

三、XMLHttpRequest对象属性

  1. onreadystatechange:请求状态改变的事件触发器(readyState变化时会调用这个属性上注册的javascript函数)。
  2. readyState:表示XMLHttpRequest对象的状态。0:未初始化。XMLHttpRequest对象已创建,未调用open。1:open方法成功调用,但send方法未调用。2:send方法已经调用,尚未开始接受数据。3:正在接受数据。Http响应头信息已经接受,但尚未接收完成。4:响应数据接受完成。
  3. response | responseText | responseXMLresponse:后台返回什么就是什么。responseTextresponseType设置的是”或者’text’,服务器响应的文本内容。responseXML:服务器响应的XML内容对应的DOM对象。
  4. 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

  1. jsonp是一种数据的传输技巧,解决Ajax跨域的问题,src没有跨域问题。
  2. 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>
  1. jsonp前端代码看起来像这样。
<script>
    function callback(data){ //定义接收数据的处理函数
        console.log( data);
    }
</script>
<script src='./jsonp.php?jsonp=callback'></script>
//我需要后台返回一个callback({数据})这样的一个值,实质就是调用上面的函数
  1. 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})
?>

评论

还没有任何评论,你来说两句吧