• 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属性方法来调用。

  • 相关阅读:
    Oracle数据库系统结构二(实例结构)
    Oracle数据库系统结构一(存储结构)
    SQL Plus的使用详解(登录和常用命令)
    Oracle的基本了解和配置
    Oracle11g的安装及删除
    C++编译预处理
    C++程序的多文件组织
    C++变量的存储类型
    C++动态存储方式与静态存储方式
    C++函数五(局部变量与全局变量和域运算符)
  • 原文地址:https://www.cnblogs.com/lax-17xu/p/12456735.html
Copyright © 2020-2023  润新知