非常不错的Ajax讲解

川长思鸟来 2022-05-16 07:56 346阅读 0赞

Ajax

Ajax 是什么

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

原生 Ajax 的使用

XMLHttpRequest

  • XMLHttpRequest 是浏览器的内置对象, 作用是在后台与服务器通信( 交换数据 )

  • 用于网页的局部更新, 而不是刷新整个页面

    // 创建一个新的 XMLHttpRequest 对象

    1. var xhr = new XMLHttpRequest();

请求 Request

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

  1. 请求行 open
    xhr.open( 'post', '01.php' );
  2. 请求头 setRequestHeader
    // post 请求需要设置头 xhr.setRequestHeader( 'Conent-Type' , 'application/x-www-form-urlencoed' ); // get 请求可以不设置请求头
  3. 请求主体 send
    xhr.send( 'name=Jim&age=18' ); // get 可以传空, 因为在头的时候已经传过数据了

响应 Response

  1. HTTP 响应是由服务端放出的, 客户端更应该关心度额是响应的结果
  2. HTTP 响应由 3 个部分组成, 与 XMLHttpRequest 的方法或属性成对应关系

  3. 由于服务器做出响应需要时间( 网络延迟等原因 ),所以需要监听服务器响应状态, 再进行处理

    if( xhr.readyState == 4 && xhr.status == 200 ){

    1.     // 进行下一步操作, 如渲染页面
    2.     document.querySelector( '#result' ).innerHTML = xhr.responseText;
    3. }

步骤分析

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

其他注意点

  1. 可以使用 onreadystatechange 来监听 XMLHttpRequest 的状态

  2. 获取行状态 ( 包括行状态码和状态信息 )

    xhr.status // 状态码

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

  3. 获取响应头

    xhr.getResponseHeader( ‘Content-Type’ );

    1. xhr.getAllResponseHeaders();

  4. 获取响应主体

    xhr.responseText // json, 文本 类型

    1. xhr.responseXML     // xml 类型

API 详解

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

get 和 post 的差异

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

get 方式的 请求响应

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

post 请求和响应

  1. //初始化
  2.     var xhr = new XMLHttpRequest();
  3.     //请求行
  4.     xhr.open("post","03 AjaxPost.php");
  5.     //请求头
  6.     xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
  7.     //请求内容
  8.     xhr.send("username=rxt&password=1234");
  10.     //监听响应改变
  11.     xhr.onreadystatechange = function(){
  13.         /*什么时候才算是http通讯结束 在readyState=4的是 响应完成*/
  14.         /*什么是才算是通讯成 status 200 */
  16.         if(xhr.status ==200 && xhr.readyState == 4){
  17.             document.querySelector("div").innerHTML = xhr.responseText;
  18.         }
  20.     }

XML

  1. XML 是可扩展标记语言（Extensible Markup Language）的缩写，其中的 标记（markup）是关键部分。XML 可以创建内容，然后使用限定标记标记它，从而使每个单词、短语或块成为可识别、可分类的信息。您创建的文件，或文档实例 由元素（标记）和内容构成。

  2. 特点

    • 必须要有根元素
    • 不能以空格, 数字或者 . 开头, 对大小写敏感
    • 不能交叉嵌套
    • 属性双引号
    • 特殊符号要使用尸体
    • 注释和 HTML 一样
  3. XML 虽然可以描述和传输复杂数据, 但是其解析过于复杂并且体积较大, 所以实际开发使用较少

  4. 格式

    <?xml version=”1.0” encoding=”UTF-8”?> images/banner.jpg 12.00 30.00 images/banner.jpg 12.00 30.00

JSON

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

特点

  1. 1. 数据在键值对中
  2. 2. 数据由 " , " 分隔, 最后一个键值不能带 " , "
  3. 3. " [] "保存数组, " {} " 保存对象
  4. 4. 使用 "" 双引号包裹键值
  6. [
  7.         {"src":"images/detail01.jpg","oldPrice":"10.12","newPrice":"130.00"},
  8.         {"src":"images/detail02.jpg","oldPrice":"1.00","newPrice":"11.00"},
  9.         {"src":"images/detail03.jpg","oldPrice":"100.00","newPrice":"1000.00"}
  10.     ]

不同语言下的解析 JSON

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

  1. 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 ‘

    ‘; $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 ‘

    ‘; /将json字符转化成php数组/ $array_json = json_decode($json_array); echo $array_json; echo ‘

    ‘; ?>

javascript 解析方法

  • JSON对象

    • JSON.parse() : 字符串 转 JSON 对象
    • JSON.stringify() : JSON 对象 转 字符串

  • JSON 兼容处理 : json2.js

    var xhr = new XMLHttpRequest;

    1. xhr.open('get','01.php');
    2. xhr.send(null);
    3. xhr.onreadystatechange = function(){
    4.    if(xhr.status == 200 && xhr.readyState == 4){
    5.        /*获取仅仅是字符串*/
    6.        var text = xhr.responseText;
    8.        /*需要把字符串转化成JSON对象*/
    9.        var json_obj = JSON.parse(text);
    10.        console.log(json_obj);
    12.        /*我们也可以把JSON对象转化成字符串*/
    13.        var json_str = JSON.stringify(json_obj);
    14.        console.log(json_str);
    15.    }
    16. }

封装 Ajax 工具函数

  1. /* * 1. 请求的类型 type get post * 2. 请求地址 url * 3. 是异步的还是同步的 async false true * 4. 请求内容的格式 contentType * 5. 传输的数据 data json对象 * * 6.响应成功处理函数 success function * 7.响应失败的处理函数 error function * * 这些都是动态参数 参数对象 options * */
  3.     /*封装一个函数*/
  4.     window.$ = {};
  5.     /*申明一个ajax的方法*/
  6.     $.ajax = function(options){
  8.     if(!options || typeof options != 'object'){
  9.         return false;
  10.     }
  12.     /*请求的类型*/
  13.     var type = options.type || 'get';/*默认get*/
  14.     /*请求地址 */
  15.     var url = options.url || location.pathname;/*当前的地址*/
  16.     /*是异步的还是同步的 */
  17.     var async = (options.async === false)?false:true;/*默认异步*/
  18.     /*请求内容的格式 */
  19.     var contentType = options.contentType || "text/html";
  21.     /*传输的数据 */
  22.     var data = options.data || {};/*｛name:'',age:''｝*/
  23.     /*在提交的时候需要转成 name=xjj 这种格式*/
  25.     var dataStr = ''/*数据字符串*/
  27.     for(var key in data){
  28.         dataStr += key+'='+data[key]+'&';
  29.     }
  31.     dataStr = dataStr && dataStr.slice(0,-1);
  33.     /*ajax 编程*/
  34.     var xhr = new XMLHttpRequest();
  36.     /*请求行*/
  37.     /*(type=='get'?url+'?'+dataStr:url)判断当前的请求类型*/
  38.     xhr.open(type,(type=='get'?url+'?'+dataStr:url),async);
  40.     /*请求头*/
  41.     if(type == 'post'){
  42.         xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  43.     }
  45.     /*请求主体*/
  46.     /*需要判断请求类型*/
  47.     xhr.send(type=='get'?null:dataStr);
  49.     /*监听响应状态的改变 响应状态*/
  50.     xhr.onreadystatechange = function(){
  51.         /*请求响应完成并且成功*/
  52.         if(xhr.readyState == 4 && xhr.status == 200){
  53.             /*success*/
  54.             var data = '';
  55.             var contentType = xhr.getResponseHeader('Content-Type');
  56.             /*如果我们服务器返回的是xml*/
  57.             if(contentType.indexOf('xml') > -1){
  58.                 data = xhr.responseXML;
  59.             }
  60.             /*如果我们的服务器返回的是json字符串*/
  61.             else if(contentType.indexOf('json') > -1){
  62.                 /*转化json对象*/
  63.                 data = JSON.parse(xhr.responseText);
  64.             }
  65.             /*否则的话他就是字符串*/
  66.             else{
  67.                 data = xhr.responseText;
  68.             }
  70.             /*回调 成功处理函数*/
  72.             options.success && options.success(data);
  73.         }
  74.         /*计时请求xhr.status不成功 他也需要的响应完成才认作是一个错误的请求*/
  75.         else if(xhr.readyState == 4){
  76.             /*error*/
  77.             options.error && options.error('you request fail !');
  79.         }
  81.     }
  82.     }
  83.     $.post = function(options){
  84.     options.type = 'post';
  85.     $.ajax(options);
  86.     }
  87.     $.get = function(options){
  88.     options.type = 'get';
  89.     $.ajax(options);
  90.     }

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 的使用

  1. $.ajax({
  2.     type : 'get',
  3.     url : 'getCode.php',
  4.     data : {
  5.     'mobile' : phone},
  6.     dataType : 'json',
  7.     beforeSend : function(){
  9.     },
  10.     success : function(info){
  12.     }
  13. });

模板引擎

artTemplate 简洁语法模板

  1. // 简洁语法 { {if admin}} { {include 'admin_content'}} { {each list}} <div>{ {$index}}</span><span class="xml">. </span><span class="hljs-template-variable">{ {$value.user}}</div> { {/each}} { {/if}}
  3. // 编写模板 <script id="test" type="text/html"> <h1>{ {title}}</h1> <ul> { {each list as value i}} <li>索引 { {i + 1}} ：{ {value}}</li> { {/each}} </ul> </script>
  5. // 渲染数据
  6.     var data = {
  7.         title: '标签',
  8.         list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
  9.     };
  10.     var html = template('test', data);
  11.     document.getElementById('content').innerHTML = html;

artTemplate js 原生语法模板

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

同源跨域

  1. 同源

    1. 同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

  2. 跨域

    1. http://api.example.com/detail.html 不同源 域名不同
    2. https//www.example.com/detail.html 不同源 协议不同
    3. http://www.example.com:8080/detail.html 不同源 端口不同
    4. http://api.example.com:8080/detail.html 不同源 域名、端口不同
    5. https://api.example.com/detail.html 不同源 协议、域名不同
    6. https://www.example.com:8080/detail.html 不同源 端口、协议不同
    7. http://www.example.com/detail/index.html 同源 只是目录不同

  3. 跨域方案

    1. 顶级域名相同的可以通过domain.name来解决，即同时设置 domain.name = 顶级域名（如example.com）
    2. document.domain + iframe
    3. window.name + iframe
    4. location.hash + iframe
    5. window.postMessage()

  4. jsonp

    1. json with padding

    2. 原理

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

jQuery 中的 Ajax

  1. url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
  2. type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
  3. timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
  4. async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
  5. cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。设置为false将不会从浏览器缓存中加载请求信息。
  6. data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,”bar2”]}转换为&foo=bar1&foo=bar2。

  7. 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：返回纯文本字符串。

  8. beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。

    function(XMLHttpRequest){

    1.    this;   //调用本次ajax请求时传递的options参数
    2. }

  9. complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。

    • 参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

      function(XMLHttpRequest, textStatus){

      1. this;    //调用本次ajax请求时传递的options参数

      }

  10. success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。

    1. 由服务器返回，并根据dataType参数进行处理后的数据。

    2. 描述状态的字符串。

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

  11. error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。
    ajax事件函数如下：

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

案例代码：

  1. $(function(){
  2.     $('#send').click(function(){
  3.          $.ajax({
  4.              type: "GET",
  5.              url: "test.json",
  6.              data: {
  7.                username:$(<span class="hljs-string">"#username"</span>).val(), content:$("#content").val()
  8.                },
  9.              dataType: "json",
  10.              success: function(data){
  11.                          $('#resText').empty();   //清空resText里面的所有内容
  12.                          var html = '';
  13.                          $.each(data, function(commentIndex, comment){
  14.                                html += '<div class="comment"><h6>' + comment['username']
  15.                                          + ':</h6><p class="para"' + comment['content']
  16.                                          + '</p></div>';
  17.                          });
  18.                          $('#resText').html(html);
  19.                       }
  20.          });
  21.     });
  22. });

发表评论

表情：
评论列表 （有 0 条评论，346人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Hough变换非常详细讲解

    Hough变换 y=k\x+b形式的直线方程没有办法表示x=c形式的直线(这时候，直线的斜率为无穷大)。所以实际应用中，利用极坐标的方式，将直线方程表示成：ρ=xcos

    r囧r小猫r囧r小猫/ 0 赞/ 594 阅读