Ajax详解

Ajax

Ajax 是什么

Asynchronous [e'sɪŋkrənəs] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
异步 : 某段程序执行时不会阻塞其他程序的执行, 表现形式是程序的执行顺序不依赖程序本身的书写顺序, 相反的情况依次执行, 那就是同步核心在于不会阻塞程序的执行, 从而提升整体执行效率

原生 Ajax 的使用

XMLHttpRequest

XMLHttpRequest 是浏览器的内置对象, 作用是在后台与服务器通信( 交换数据 )
用于网页的局部更新, 而不是刷新整个页面

    // 创建一个新的 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();

请求 Request

HTTP 请求由 3 个部分组成, 正好和 XMLHttpRequest 相对应

请求行 open
```
    xhr.open( 'post', '01.php' );
```

请求头 setRequestHeader

    // post 请求需要设置头
    xhr.setRequestHeader( 'Conent-Type' , 'application/x-www-form-urlencoed' );
    // get 请求可以不设置请求头

请求主体 send

    xhr.send( 'name=Jim&age=18' );
    // get 可以传空, 因为在头的时候已经传过数据了

响应 Response

HTTP 响应是由服务端放出的, 客户端更应该关心度额是响应的结果
HTTP 响应由 3 个部分组成, 与 XMLHttpRequest 的方法或属性成对应关系
由于服务器做出响应需要时间( 网络延迟等原因 ),所以需要监听服务器响应状态, 再进行处理

    if( xhr.readyState == 4 && xhr.status == 200 ){
        // 进行下一步操作, 如渲染页面
        document.querySelector( '#result' ).innerHTML = xhr.responseText;
    }

步骤分析

请求未初始化 ( 还没有调用 open() )
请求已经建立, 但是还没有发送 ( 还没有调用send() )
请求已发送, 正在处理中 ( 通常现在可以从相应中获取内容头 )
请求在才处理中 , 通常响应中已经有部分数据可以用了, 但是服务器还没有完全完成响应
响应已经完成, 可以获取并使用服务器的响应了

其他注意点

可以使用 onreadystatechange 来监听 XMLHttpRequest 的状态
获取行状态 ( 包括行状态码和状态信息 )

    xhr.status  // 状态码
    xhr.statusText // 状态码嘻嘻

获取响应头

    xhr.getResponseHeader( 'Content-Type' );
    xhr.getAllResponseHeaders();

获取响应主体

    xhr.responseText    // json, 文本 类型
    xhr.responseXML     // xml 类型

API 详解

xhr.open() 发送请求, 可以是 get 或者 post 方式
xhr.setRequestHeader() 设置请求头
xhr.send() 发送请求主体, 如果是 get 方式使用 xhr.send(null), 因为在 open 中已经发送了请求主体
xhr.onreadystatechange = functtion(){} 监听响应状态
xhr.status 表示响应码, 如 200 表示成功
xhr.statusText 表示响应信息. 如 ok
xhr.getAllResponseHeaders() 获取全部响应头信息
xhr.getResponseHeader( 'key' ) 获取指定响应头信息
xhr.reponseText xhr.responseXML 都表示响应主体, 格式不同

get 和 post 的差异

get 没有请求主体, 使用 xhr.send(null) 发送请求主体
get 可以通过请求 url 上添加请求函数
post 可以通过 xhr.send( 'name=itcast&age=10' ) 发送请求主体
post 需要设置
get 性能高( 基本上获取内容都是使用get )
get 大小限制约 4kb, post 则没有限制

get 方式的请求响应

    var xhr = new XMLHttpRequest;
        xhr.open('get','01.php');
        xhr.send(null);
        xhr.onreadystatechange = function(){
         if(xhr.status == 200 && xhr.readyState == 4){
             /*获取到XML格式内容  放回的是DOM对象  document*/
             var xml = xhr.responseXML;
             /*通过选着器可以获取到xml的数据*/
             console.log(xml.querySelectorAll('array')[0].querySelector('src').innerHTML);
         }
    }

post 请求和响应

    //初始化
    var xhr = new XMLHttpRequest();
    //请求行
    xhr.open("post","03 AjaxPost.php");
    //请求头
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
    //请求内容
    xhr.send("username=rxt&password=1234");

    //监听响应改变
    xhr.onreadystatechange = function(){

        /*什么时候才算是http通讯结束 在readyState=4的是 响应完成*/
        /*什么是才算是通讯成  status 200 */

        if(xhr.status ==200 && xhr.readyState == 4){
            document.querySelector("div").innerHTML = xhr.responseText;
        }

    }

XML

XML 是可扩展标记语言（Extensible Markup Language）的缩写，其中的标记（markup）是关键部分。XML 可以创建内容，然后使用限定标记标记它，从而使每个单词、短语或块成为可识别、可分类的信息。您创建的文件，或文档实例由元素（标记）和内容构成。
特点
- 必须要有根元素
- 不能以空格, 数字或者 . 开头, 对大小写敏感
- 不能交叉嵌套
- 属性双引号
- 特殊符号要使用尸体
- 注释和 HTML 一样
XML 虽然可以描述和传输复杂数据, 但是其解析过于复杂并且体积较大, 所以实际开发使用较少
格式

    <?xml version="1.0" encoding="UTF-8"?>
    <root>
    <arrayList>
        <array>
            <src>images/banner.jpg</src>
            <newPirce>12.00</newPirce>
            <oldPrice>30.00</oldPrice>
        </array>
        <array>
            <src>images/banner.jpg</src>
            <newPirce>12.00</newPirce>
            <oldPrice>30.00</oldPrice>
        </array>
    </arrayList>
    </root>

JSON

JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。

特点

1. 数据在键值对中
2. 数据由 " , " 分隔, 最后一个键值不能带 " , "
3. " [] "保存数组, " {} " 保存对象
4. 使用 "" 双引号包裹键值

    [
        {"src":"images/detail01.jpg","oldPrice":"10.12","newPrice":"130.00"},
        {"src":"images/detail02.jpg","oldPrice":"1.00","newPrice":"11.00"},
        {"src":"images/detail03.jpg","oldPrice":"100.00","newPrice":"1000.00"}
    ]

不同语言下的解析 JSON

JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取

php 方法

json_encode() : 将 php 数组转化为 json 字符
json_decode() : 将 json 字符串转换为 php 数组

    <?php
        header('Content-Type:text/html;charset=utf-8');
        /*以json格式传输数据的时候要求响应内容格式是   application/json*/
        /*注意也可以不设置  但是这遵循的一个规范*/

        /*file_get_contents 获取文件内容*/
        $json = file_get_contents('01.json');

        /*输出json内容*/
        echo $json;
        echo '<br><br>';

        $array = array(
            array('src'=>'images/detail01.jpg','newPrice'=>'12.00','oldPrice'=>'455.00'),
            array('src'=>'images/detail02.jpg','newPrice'=>'65.00','oldPrice'=>'878.00'),
            array( 'src'=>'images/detail01.jpg','newPrice'=>'100.00','oldPrice'=>'1000.00')
        );

        /*将php数组转化成json字符*/
        $json_array = json_encode($array);
        echo $json_array;
        echo '<br><br>';

        /*将json字符转化成php数组*/
        $array_json = json_decode($json_array);
        echo $array_json;
        echo '<br><br>';
    ?>

javascript 解析方法

JSON对象
- JSON.parse() : 字符串转 JSON 对象
- JSON.stringify() : JSON 对象转字符串
JSON 兼容处理 : json2.js

    var xhr = new XMLHttpRequest;
    xhr.open('get','01.php');
    xhr.send(null);
    xhr.onreadystatechange = function(){
       if(xhr.status == 200 && xhr.readyState == 4){
           /*获取仅仅是字符串*/
           var text = xhr.responseText;

           /*需要把字符串转化成JSON对象*/
           var json_obj = JSON.parse(text);
           console.log(json_obj);

           /*我们也可以把JSON对象转化成字符串*/
           var json_str = JSON.stringify(json_obj);
           console.log(json_str);
       }
    }

封装 Ajax 工具函数

    /*
    * 1. 请求的类型                type    get post
    * 2. 请求地址                  url
    * 3. 是异步的还是同步的         async   false true
    * 4. 请求内容的格式            contentType
    * 5. 传输的数据                data    json对象
    *
    * 6.响应成功处理函数           success   function
    * 7.响应失败的处理函数         error     function
    *
    * 这些都是动态参数  参数对象  options
    * */

    /*封装一个函数*/
    window.$ = {};
    /*申明一个ajax的方法*/
    $.ajax = function(options){

    if(!options || typeof options != 'object'){
        return false;
    }

    /*请求的类型*/
    var type = options.type || 'get';/*默认get*/
    /*请求地址 */
    var url = options.url || location.pathname;/*当前的地址*/
    /*是异步的还是同步的 */
    var async = (options.async === false)?false:true;/*默认异步*/
    /*请求内容的格式 */
    var contentType = options.contentType || "text/html";

    /*传输的数据 */
    var data = options.data || {};/*｛name:'',age:''｝*/
    /*在提交的时候需要转成 name=xjj 这种格式*/

    var dataStr = ''/*数据字符串*/

    for(var key in data){
        dataStr += key+'='+data[key]+'&';
    }

    dataStr = dataStr && dataStr.slice(0,-1);

    /*ajax 编程*/
    var xhr = new XMLHttpRequest();

    /*请求行*/
    /*(type=='get'?url+'?'+dataStr:url)判断当前的请求类型*/
    xhr.open(type,(type=='get'?url+'?'+dataStr:url),async);

    /*请求头*/
    if(type == 'post'){
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    }

    /*请求主体*/
    /*需要判断请求类型*/
    xhr.send(type=='get'?null:dataStr);

    /*监听响应状态的改变  响应状态*/
    xhr.onreadystatechange = function(){
        /*请求响应完成并且成功*/
        if(xhr.readyState == 4 && xhr.status == 200){
            /*success*/
            var data = '';
            var contentType = xhr.getResponseHeader('Content-Type');
            /*如果我们服务器返回的是xml*/
            if(contentType.indexOf('xml') > -1){
                data = xhr.responseXML;
            }
            /*如果我们的服务器返回的是json字符串*/
            else if(contentType.indexOf('json') > -1){
                /*转化json对象*/
                data = JSON.parse(xhr.responseText);
            }
            /*否则的话他就是字符串*/
            else{
                data = xhr.responseText;
            }

            /*回调 成功处理函数*/

            options.success && options.success(data);
        }
        /*计时请求xhr.status不成功  他也需要的响应完成才认作是一个错误的请求*/
        else if(xhr.readyState == 4){
            /*error*/
            options.error && options.error('you request fail !');

        }

    }
    }
    $.post = function(options){
    options.type = 'post';
    $.ajax(options);
    }
    $.get = function(options){
    options.type = 'get';
    $.ajax(options);
    }

jQuery 中的 Ajax

jQuery为我们提供了更强大的Ajax封装
$.ajax({}) 可配置方式发起Ajax请求
$.get() 以GET方式发起Ajax请求
$.post() 以POST方式发起Ajax请求
$('form').serialize() 序列化表单（即格式化key=val&key=val）
url 接口地址
type 请求方式
timeout 请求超时
dataType 服务器返回格式
data 发送请求数据
beforeSend: function () {} 请求发起前调用
success 成功响应后调用
error 错误响应时调用
complete 响应完成时调用（包括成功和失败）
jQuery Ajax介绍
http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

jQuery 中 Ajax 的使用

$.ajax({
    type : 'get',
    url : 'getCode.php',
    data : {'mobile' : phone},
    dataType : 'json',
    beforeSend : function(){

    },
    success : function(info){

    }
});

模板引擎

artTemplate 简洁语法模板

    // 简洁语法
    {{if admin}}
        {{include 'admin_content'}}

        {{each list}}
            <div>{{$index}}. {{$value.user}}</div>
        {{/each}}
    {{/if}}

    // 编写模板
    <script id="test" type="text/html">
        <h1>{{title}}</h1>
        <ul>
            {{each list as value i}}
                <li>索引 {{i + 1}} ：{{value}}</li>
            {{/each}}
        </ul>
    </script>

    // 渲染数据
    var data = {
        title: '标签',
        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    };
    var html = template('test', data);
    document.getElementById('content').innerHTML = html;

artTemplate js 原生语法模板

    // 模板 js 原生语法
    <h1><%=title%></h1>
    <ul>
    <%for(i = 0; i < list.length; i ++) {%>
        <li>条目内容 <%=i + 1%> ：<%=list[i]%></li>
    <%}%>
    </ul>
    <% 与 %> 符号包裹起来的语句则为模板的逻辑表达式。
    对内容编码输出：<%=content%>
    不编码输出：<%=#content%>

同源跨域

同源
2. 同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。
跨域
3. http://api.example.com/detail.html 不同源域名不同
4. https//www.example.com/detail.html 不同源协议不同
5. http://www.example.com:8080/detail.html 不同源端口不同
6. http://api.example.com:8080/detail.html 不同源域名、端口不同
7. https://api.example.com/detail.html 不同源协议、域名不同
8. https://www.example.com:8080/detail.html 不同源端口、协议不同
9. http://www.example.com/detail/index.html 同源只是目录不同
跨域方案
1. 顶级域名相同的可以通过domain.name来解决，即同时设置 domain.name = 顶级域名（如example.com）
2. document.domain + iframe
3. window.name + iframe
4. location.hash + iframe
5. window.postMessage()

jsonp
5. json with padding
6. 原理
7. 其本质是利用了标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。

    <!--
    当我们用script标签去加载的时候  会把内容解析成js去执行
    -->
    <script>
        function fuc(data){
            console.log(data.name);
        }
    </script>
    <script src="http://www.guangzhou.com/api.php?callback=fuc"></script>

jQuery 中的 Ajax

url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。设置为false将不会从浏览器缓存中加载请求信息。
data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。
- 可用的类型如下：
  - xml：返回XML文档，可用JQuery处理。
  - html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
  - script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
  - json：返回JSON数据。
  - jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
  - text：返回纯文本字符串。
beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。

    function(XMLHttpRequest){
       this;   //调用本次ajax请求时传递的options参数
    }

complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。
- 参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

    function(XMLHttpRequest, textStatus){
       this;    //调用本次ajax请求时传递的options参数
    }

success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
1. 由服务器返回，并根据dataType参数进行处理后的数据。
2. 描述状态的字符串。

   function(data, textStatus){
      //data可能是xmlDoc、jsonObj、html、text等等
      this;  //调用本次ajax请求时传递的options参数

error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。
ajax事件函数如下：
```
  function(XMLHttpRequest, textStatus, errorThrown){
     //通常情况下textStatus和errorThrown只有其中一个包含信息
     this;   //调用本次ajax请求时传递的options参数
  }
```
contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){ //返回处理后的数据 return data; }
global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
ifModified：要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。
processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
scriptCharset：要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

案例代码：

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {
               username:$("#username").val(), content:$("#content").val()
               },
             dataType: "json",
             success: function(data){
                         $('#resText').empty();   //清空resText里面的所有内容
                         var html = '';
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});

posted @ 2016-09-05 15:10 她们都叫我剑侠阅读(2896) 评论(0) 编辑收藏举报

刷新页面返回顶部

突然累了

Ajax详解

Ajax

Ajax 是什么

原生 Ajax 的使用

XMLHttpRequest

请求 Request

响应 Response

步骤分析

其他注意点

API 详解

get 和 post 的差异

get 方式的请求响应

post 请求和响应

XML

JSON

特点

不同语言下的解析 JSON

javascript 解析方法

封装 Ajax 工具函数

jQuery 中的 Ajax

jQuery 中 Ajax 的使用

模板引擎

artTemplate 简洁语法模板

artTemplate js 原生语法模板

同源跨域

jQuery 中的 Ajax

公告

突然累了

Ajax详解

Ajax

Ajax 是什么

原生 Ajax 的使用

XMLHttpRequest

请求 Request

响应 Response

步骤分析

其他注意点

API 详解

get 和 post 的差异

get 方式的 请求响应

post 请求和响应

XML

JSON

特点

不同语言下的解析 JSON

javascript 解析方法

封装 Ajax 工具函数

jQuery 中的 Ajax

jQuery 中 Ajax 的使用

模板引擎

artTemplate 简洁语法模板

artTemplate js 原生语法模板

同源跨域

jQuery 中的 Ajax

公告

get 方式的请求响应