Ajax

curiousL

于 2016-12-01 17:44:36 发布

阅读量345

点赞数

分类专栏： AJAX 文章标签： ajax javascript 异步

本文链接：https://blog.csdn.net/curiousL/article/details/53424306

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

## AJAX ##

 * 同步交互与异步交互

       * 同步交互

         * 客户端向服务器端发送请求,到服务器端向客户端进行响应,这个过程中,用户不能做任何其他事情的
       * 异步交互
         * 客户端向服务器端发送请求,到服务器端向客户端进行响应,这个过程中,用户可以左任何其他事情的
     * 同步交互与异步交互的优缺点
       * 同步交互
         * 缺点
       * 使用多页面实现 - 体积较大
       * 发送的数据包较大 - 带宽要求高,对服务器端造成压力大
     * 优点
       * 功能明确 - 分角色开发
       * 低耦合
       * 异步交互
         * 优点
       * 使用单页面实现 - 体积较小
       * 发送的数据包较小 - 带宽要求低,对服务器端造成压力小
     * 缺点
       * 高耦合
       * 小则怡情,大则伤身
     * B/S架构下的异步技术
       * AJAX

1、什么是AJAX
AJAX是“Asynchronous JavaScript and XML”：异步的JS 和XML。一种创建交互式网页应用的网页开发技术。
Ajax包含下列技术：
基于web标准（standards-basedpresentation）XHTML+CSS的表示；
使用 DOM（Document ObjectModel）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。
2、Ajax应用程序的优势在于：
1. 提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

3、AJAX最大的特点是什么。
Ajax可以实现动态不刷新（局部刷新）
就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

4、XMLhttpRequest对象。
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。
创建：

function getXhr(){
        var xhr = null;//定义核心对象
    if(window.XMLHttpRequest){//其他浏览器
       xhr = new XMLHttpRequest();
    }else{//IE浏览器
       xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
     }

5、 XMLHttpRequest对象的API

* 属性
       * readyState属性 - 表示服务器端的通信状态
         * 0 - (服务器端)未初始化
     * 1 - (服务器端)正在连接
     * 2 - (服务器端)正在接收|客户端正在请求
     * 3 - (服务器端)正在响应|客户端正在接收
     * 4 - (服务器端)响应完毕|客户端接收完毕
       * status属性 - 表示状态码
       * responseText属性 - 以文本格式进行接收服务器端的响应数据
       * responseXML属性 - 以XML格式进行接收服务器端的响应数据
     * 方法
       * open()方法 - 与服务器端建立连接
       * send()方法 - 向服务器端发送请求数据
       * setRequestHeader()方法 - 设置请求头
     * 事件
       * onreadystatechange事件
         * 作用 - 监听服务器端的通信状态(改变)

6、实现AJAX的步骤：

 
 1：* 创建Ajax的核心对象 - XMLHttpRequest
 2：* 与服务器端建立连接
       * 使用的是XMLHttpRequest对象的open()方法
       open(type,url,async)方法
       * type - 请求类型(方式) GET|POST
       * url - 请求地址
       * async - 是否异步(Boolean值)
         * true - 默认值,表示异步
         * false - 不建议使用,表示同步
         * 注意
           * XMLHttpRequest对象的第一个版本
           * XMLHttpRequest对象的第二个版本没有
 3：* 向服务器端发送请求数据
       * 使用的是XMLHttpRequest对象的send()方法
       send()方法
       * GET方式的请求 - 该方法失效
         * 注意
           * 该步骤(方法)是不能被省略的
           * 请求数据添加在URL后面
         * 写法
          * xhr.send(null)
       * POST方式的请求 
         * 调用send()方法前,设置请求头信息
           xhr.setRequestHeader("Content-Type","application/x-www-form-                urlencoded");

 4：* 接收服务器端的响应数据
       * 使用的是XMLHttpRequest对象的onreadystatechange事件
         * 用于监听服务器端的通信状态
       * 使用的是XMLHttpRequest对象的readyState属性
         * 判断服务器端当前的通信状态
     * 备选值
       * 0 - 未初始化
       * 1 - 正在连接
       * 2 - 正在请求
       * 3 - 正在响应
       * 4 - 响应完毕
       * 使用的是XMLHttpRequest对象的status属性
         * 作用 - 表示服务器端的状态码
     * 判断当前的请求是否成功
       * 200 - 表示成功
       * 404 - 网页未找到
       * 500 - 服务器端的内部错误
       * 使用的是XMLHttpRequest对象的responseText属性
         * 是以字符串类型接收服务器端响应的数据内容

实例：

    var btn = document.getElementById("btn");
    btn.onclick = function(){
        // 1. 创建XMLHttpRequest对象
        var xhr = getXhr();
        /*
           2. 与服务器端建立连接 - open()方法
             * type - 指定为 POST 方式
         */
        xhr.open("post","sever.php");
        /*
           3. 向服务器端发送请求数据 - send()方法
             * 问题 - 请求类型为POST方式时,send()默认失效的
             * 解决 - 需要手动设置请求头
               xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); * 必须要在send()方法被调用前,进行设置      
         */
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send("user=aaa&pwd=12345");
        // 4. 接收服务器端的响应数据
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                var data = xhr.responseText;
                console.log(data);
            }
        }
    }

7、AJAX中的XML 格式：
1：XML - 可扩展标记语言
用途
* 配置文件 - 多用于服务器端技术开发
* 存储(传输)数据 - 以文件方式存储
示例：
JS

    
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        var xhr = getXhr();
        xhr.open("post","06.php");
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        /*
           如何向服务器端发送XML格式的数据内容?
           * 构建成符合XML格式的字符串数据
           * 请求数据格式一定是 name=value&name=value
         */
        var xmlString = "zhangwuji12345";
        xhr.send("data="+xmlString);

        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                var data = xhr.responseXML;
                console.log(data);
            }
        }
    }

PHP

    /*
       1. 接收符合XML格式的字符串请求数据
         * 通过$_GET或$_POST进行接收
         * 利用DOM解析XML格式的数据内容
           * 创建DOMDocument对象
           * 通过DOMDocument对象调用loadXML()方法读取XML格式的字符串
             * 得到XML DOM对象
           * 利用DOMElement和DOMNode对象的属性和方法
     */
    $xmlString = $_POST['data'];
    // a. 创建DOMDocument对象
    $doc = new DOMDocument();
    // b. 调用loadXML()方法进行读取
    $doc->loadXML($xmlString);
    // c. 通过getElementsByTagName()方法查找元素
    $nameElement = $doc->getElementsByTagName('name');
    //var_dump($nameElement[0]->nodeValue);
    /*
       2. 构建XML格式的数据,响应给客户端
         * 构建一个符合XML格式的字符串类型数据
         * 注意 - 设置响应头信息
           Content-Type:text/xml
     */
    header("Content-Type:text/xml");
    echo 'zhangwuji12345';
?>

7、AJAX中的JSON格式：
JSON：一种轻量级的数据交换格式。
结构 * “名称/值”对的集合 - 在JavaScript就是Object
* 值的有序列表 - 在JavaScript就是Array
示例：
JS

var btn = document.getElementById("btn");
    btn.onclick = function(){
        var xhr = getXhr();
        xhr.open("post","08.php");
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        /*
           客户端如何构建JSON格式的数据内容
           * (错误)通过JavaScript定义Object或Array之一
           * (正确)构建符合JSON格式的字符串
             * 构建字符串外层使用单引号
             * 构建字符串内部使用双引号
         */
        var user = '{"name":"zhangwuji","pwd":12345}';
        xhr.send("user="+user);

        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                // 接收的数据类型为字符串
                var data = xhr.responseText;
                /*
                   将数据转换为JSON格式
                   eval()函数 - 进行转换时
                   * 不使用"()",eval()函数当做空的语句块
                   * 使用"()",eval()函数强制进行转换
                 */
                var json = eval("("+data+")");
                console.log(json);
            }
        }
    }

PHP

    $user = $_POST['user'];

    $arr = json_decode($user,true);

    echo json_encode($arr);
?>

8、jQurey中的AJAX：
1：

 $.ajax(options)

2：

$().load(url,data,callback)
$.get(url,data,callback,type)
$.get(url,data,callback,type)

3：

  * $.getScript()方法 - 动态读取脚本
  * $.getJSON()方法 - 返回数据一定是JSON格式

9、AJAX提交表单：

* 解决的问题 - 阻止表单的默认提交行为
     * 利用表单的submit提交事件
       * return false;
       * event.preventDefault();
     * 在表单内不使用submit按钮
   * 手工方式构建表单内的所有数据
     * 表单的序列化 - 可以通过表单自动构建JSON格式的数据
       * serialize()方法
         * 注意 - 表单元素必须具有name属性值(不是id属性值)
     * 格式 - name=value&name=value&...
       * serializeArray()方法
         * 返回值 - Array
   * 通过Ajax方式进行异步提交

10、

* 跨域请求
   跨域：不同域名之间相互访问。
     * 跨域默认是不被允许的
       * 遵循同源策略
       * 所谓的同源,就是指域名、协议和端口相同
     * 跨域分类
       * 完全跨域 - IP不同
       * 跨子域 - IP相同,但端口号不同
     * 如何跨域? -
       Jsonp：(JSON with Padding)是一种跨域请求方式。主要原理是利用了script 标签可以跨域请求的特点，由其 src 属性发送请求到服务器，服务器返回 js 代码，网页端接受响应，然后就直接执行了，这和通过 script 标签引用外部文件的原理是一样的。JSONP由两部分组成：回调函数和数据，回调函数一般是由网页端控制，作为参数发往服务器端，服务器端把该函数和数据拼成字符串返回。

pjax：pjax是一种基于ajax+history.pushState的新技术，该技术可以无刷新改变页面的内容，并且可以改变页面的URL。（关键点：可以实现ajax无法实现的后退功能）pjax是ajax+pushState的封装，同时支持本地存储、动画等多种功能。目前支持jquery、qwrap、kissy等多种版本。

11、AJAX都有哪些优点和缺点？

优点：