AJAX

Posted 两毛钱的月色

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX相关的知识,希望对你有一定的参考价值。

1.AJAX

 AJAX 就是浏览器提供的一套 API,可以通过 javascript 调用,从而实现通过代码控制请求与响应。实现
网络编程。

2.readyState

readyState
 
状态描述
 
说明
0 UNSENT  代理(XHR)被创建,但尚未调用 open() 方法。
1 OPENED open() 方法已经被调用,建立了连接。
2 HEADERS_RECEIVED send() 方法已经被调用,并且已经可以获取状态行和响应头。
3 LOADING 响应体下载中, responseText 属性可能已经包含部分数据。
4 DONE 响应体下载完成,可以直接使用 responseText 。
 
 
 
 
 
 
 
 
 

3.GET请求

技术图片
var xhr = new XMLHttpRequest() 
// GET 请求传递参数通常使用的是问号传参 
// 这里可以在请求地址后面加上参数,从而传递数据到服务端
 xhr.open(‘GET‘, ‘./delete.php?id=1‘) 
// 一般在 GET 请求时无需设置响应体,可以传 null 或者干脆不传 xhr.send(null) 
xhr.onreadystatechange = function () { 
    if (this.readyState === 4) { 
            console.log(this.responseText) 
    } 
}
// 一般情况下 URL 传递的都是参数性质的数据,而 POST 一般都是业务数据   
技术图片

 

4.POST请求

技术图片
var xhr = new XMLHttpRequest() 
// open 方法的第一个参数的作用就是设置请求的 method 
xhr.open(‘POST‘, ‘./add.php‘) 
// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded 
// 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据 xhr.setRequestHeader(‘Content‐Type‘, ‘application/x‐www‐form‐urlencoded‘) 
// 需要提交到服务端的数据可以通过 send 方法的参数传递 // 格式:key1=value1&key2=value2 
xhr.send(‘key1=value1&key2=value2‘) 
xhr.onreadystatechange = function () { 
    if (this.readyState === 4) { 
        console.log(this.responseText) 
    } 
}    
技术图片

 

5.同步与异步

同步:一个人在同一个时刻只能做一件事情,在执行一些耗时的操作(不需要看管)不去做别的事,只是等待
异步:在执行一些耗时的操作(不需要看管)去做别的事,而不是等待 
xhr.open() 方法第三个参数要求传入的是一个 bool 值,其作用就是设置此次请求是否采用异步方式执行,默认为 true ,如果需要同步执行可以通过传递 false 实现: 
技术图片
console.log(‘before ajax‘) 
var xhr = new XMLHttpRequest() 
// 默认第三个参数为 true 意味着采用异步方式执行 
xhr.open(‘GET‘, ‘./time.php‘, true) 
xhr.send(null) 
xhr.onreadystatechange = function () { 
    if (this.readyState === 4) { 
    // 这里的代码最后执行 
        console.log(‘request done‘)
     } 
}
console.log(‘after ajax‘) 
技术图片

 

如果采用同步方式执行,则代码会卡死在 xhr.send() 
一定在发送请求 send() 之前注册 readystatechange (不管同步或者异步) 
技术图片
console.log(‘before ajax‘) 
var xhr = new XMLHttpRequest() 
// 同步方式 
xhr.open(‘GET‘, ‘./time.php‘, false) 
// 同步方式 执行需要 先注册事件再调用 send,否则 readystatechange 无法触发 
xhr.onreadystatechange = function () { 
    if (this.readyState === 4) { 
    // 这里的代码最后执行 
        console.log(‘request done‘) 
    } 
}
xhr.send(null) 
console.log(‘after ajax‘)
技术图片

6. XML

一种数据描述手段
老掉牙的东西,简单演示一下,不在这里浪费时间,基本现在的项目不用了。
淘汰的原因:数据冗余太多

7. JSON

也是一种数据描述手段,类似于 JavaScript 字面量方式
服务端采用 JSON 格式返回数据,客户端按照 JSON 格式解析数据。
总结:不管是 JSON 也好,还是 XML,只是在 AJAX 请求过程中用到,并不代表它们之间有必然的联系,它们只是
数据协议罢了 

 8.响应数据渲染

模板引擎:artTemplate

 9.兼容方案

XMLHttpRequest在老版浏览器(IE5/6)中有兼容问题,可以通过另外一种方式解决
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘)

 


 10.关于AJAX的封装

技术图片
function ajax (method, url, params) {
      var res = null

      method = method.toUpperCase()
      var xhr = new XMLHttpRequest()

      // 将 object 类型的参数转换为 key=value&key=value
      if (typeof params === ‘object‘) {
        var tempArr = []
        for (var key in params) {
          var value = params[key]
          tempArr.push(key + ‘=‘ + value)
        }
        // tempArr => [ ‘key1=value1‘, ‘key2=value2‘ ]
        params = tempArr.join(‘&‘)
        // params => ‘key1=value1&key2=value2‘
      }

      if (method === ‘GET‘) {
        url += ‘?‘ + params
      }

      xhr.open(method, url, false)

      var data = null
      if (method === ‘POST‘) {
        xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘)
        data = params
      }

      xhr.onreadystatechange = function () {
        if (this.readyState !== 4) return
        // 不应该在封装的函数中主观的处理响应结果
        // console.log(this.responseText)
        // 无法再内部包含的函数中通过 return 给外部函数的调用返回结果
        // return this.responseText
        // 由于异步模式下 这里的代码最后执行 所以不可能在外部通过返回值的方式返回数据
        res = this.responseText
      }
技术图片

 11.jQuery中对AJAX的封装

技术图片
 $.ajax({
      url: ‘json.php‘,
      type: ‘get‘,
      // 设置的是请求参数
      data: { id: 1, name: ‘张三‘ },
      // 用于设置响应体的类型 注意 跟 data 参数没关系!!!
      dataType: ‘json‘,
      success: function (res) {
        // 一旦设置的 dataType 选项,就不再关心 服务端 响应的 Content-Type 了
        // 客户端会主观认为服务端返回的就是 JSON 格式的字符串
        console.log(res)
      }
    })
技术图片

 

常用选项参数介绍:

url:请求地址

type:请求方法,默认为 get

dataType:服务端响应数据类型 

contentType:请求体内容类型,默认 application/x-www-form-urlencoded

data:需要传递到服务端的数据,如果 GET 则通过 URL 传递,如果 POST 则通过请求体传递

timeout:请求超时时间

beforeSend:请求发起之前触发

success:请求成功之后触发(响应状态码 200)

error:请求失败触发

complete:请求完成触发(不管成功与否)

12.jsonp

JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法,常用于服务器与客户端跨源通信,在后来的Web服务中非常流行。

其原理就是在客户端借助 script 标签请求服务端的一个动态网页(php 文件),服务端的这个动态网页返回一段带有函数调用的 JavaScript 全局函数调用的脚本,将原本需要返回给客户端的数据传递进去。
<!DOCTYPE html>
<html lang="en" >
<head>
     <title>JSONP</title>
      <script type="text/javascript" src=jquery.min.js"></script>
      <script type="text/javascript">
     jQuery(document).ready(function(){ 
        $.ajax({
             type: "get",
             async: false,
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
             success: function(json){
                 alert(‘您查询到航班信息:票价: ‘ + json.price + ‘ 元,余票: ‘ + json.tickets + ‘ 张。‘);
             },
             error: function(){
                 alert(‘fail‘);
             }
         });
     });
     </script>
     </head>
  <body>
  </body>
</html>

 jquery在处理jsonp类型的ajax时(虽然jquery也把jsonp归入了ajax,但其实它们不是一回事儿),自动帮你生成回调函数并把数据取出来供success属性方法来调用。

 

以上是关于AJAX的主要内容,如果未能解决你的问题,请参考以下文章

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段

Spring MVC 3.2 Thymeleaf Ajax 片段