JavaScript Ajax

时间  2019-12-04
标签 javascript ajax 栏目 JavaScript 繁體版
原文   原文链接

1、认识Ajax

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

2、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对象会复位到未初始化的状态。

3、XMLHttpRequest对象属性

  1. onreadystatechange：请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）。
  2. readyState：表示XMLHttpRequest对象的状态。0：未初始化。XMLHttpRequest对象已建立，未调用open。1：open方法成功调用，但send方法未调用。2：send方法已经调用，还没有开始接受数据。3：正在接受数据。Http响应头信息已经接受，但还没有接收完成。4：响应数据接受完成。
  3. response | responseText | responseXML。response：后台返回什么就是什么。responseText：responseType设置的是''或者'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);
复制代码

4、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
)));
复制代码

5、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})
?>
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程