XYX's Blog 首页归档标签分类相册
Ajax
|Ajax
字数总计: 1.6k|阅读时长: 5 分钟

序

页面的局部刷新技术

Ajax

  • 允许浏览器和服务器通信而无须刷新整个页面的技术

  • XMLHttpRequest:该对象是对JS的一个拓展，可使网页与服务器进行通信，是创建Ajax应用的最佳选择

  • Ajax实际上是几种技术以一种全新的方式聚合在一起：

    • 服务器端语言：服务器需要具备向浏览器发送特定信息的能力，Ajax与服务器端语言无关
    • XMl是一种描述数据的格式，Ajax需要某种格式化的格式来在服务器和客户端之间传递信息，XML就是其中的一种选择
    • XHTML使用扩展超媒体标记语言和CSS标准化呈现
    • DOM实现动态显示和交互
    • 使用XMLHTTP组件XMLHttpRequest对象进行异步读取
    • 使用JS进行绑定和处理数据

发送请求

  • 利用XMLHttpRequest实例与服务器进行通信包含三个关键的部分

  1. onreadystatechang事件处理函数

    • 该函数由服务器触发，而不是用户
    • 在Ajax执行过程中，服务器会通知客户端当前的通信状态，这依靠更新XMLHttpRequest对象的readyState来实现，改变readyState属性是服务器对客户端连接操作的一种方式，每次readyState属性的改变都会触发readystatechang事件

  2. open(method,url,asynch)方法

    • open运行用一个Ajax调用向服务器发送请求
    • method：请求的类型
      • GET从服务器检索一个文件，不需要发送任何数据
      • POST向服务器发送数据
    • url:路径，指向你所请求的服务器上的那个文件，通常会在url后附一个时间戳来清除浏览器缓存，不清除的话下次访问的页面还是上次请求的页面不会改变
    • asynch：表示请求是否异步传输，默认值是true，在读取后面的脚本之前不需要等待服务器响应，指定false，当脚本处理过程经过这点时，会停下来等到Ajax请求完毕在继续执行

  3. send方法

    • open方法定义了Ajax请求的一些细节，send方法可为已经待命的请求发送指令
    • 如果用的是GET请求，不会发送任何数据，给send方法传递null即可
    • 如果是POST请求，则要为send方法提供参数，如果没用参数用null代替

  4. sendRequestHeader(header,value)

    • 首部信息用来声明一个请求时GET还是POST
    • header首部的名字，value首部的值

接收响应

  1. readyState

    • 表示Ajax请求的当前状态
      • 0表示初始化，还没有调用open方法
      • 1表示正在加载，open方法已调用，send方法还没调用
      • 2表示已加载完毕，send方法已调用，请求开始了
      • 3表示交互中，服务器正在发送响应
      • 4表示完成，响应发送完毕
    • 每次readyState的值发生改变时，都会触发readystatechang事件
    • readystate值的变化会因浏览器的不同而有所差异，但是，当请求结束的时候，每个浏览器都会把readyState的值统一设置为4

  2. status

    • 服务器发送的每一个响应都带有首部信息，三位数的状态码是最重要的首部信息
    • 常用状态码及其含义：
      • 404没找到页面
      • 403禁止访问
      • 500内部服务器错误
      • 200一切正常
      • 304没有被修改
    • 在XMLHttpRequest对象中，服务器发送的状态码都保存在status属性里，通过把这个值和200或304比较，可以确保服务器是否已发送了一个成功的响应

  3. responseText

    • 该属性包含了从服务器发送的数据，他可以是一个html，json或普通文本，这取决于服务器发送的内容
    • 当readyState属性变成4时，responseText属性才可用，表示Ajax请求已经结束

  4. responseXML

    • 如果服务器返回的是xml，那么数据存储在该属性中
  • 若应用程序不需要与其他应用程序共享数据时，使用HTML来返回数据是最简单的
  • 如果数据要重用，JSON文件在性能和文件大小上都有优势
  • 如果远程应用程序未知时，XML文档是首选，因为XML是web服务领域的世界语

Ajax传输数据的三种方式：

  1. XML：笨重，解析困难，但是XML是通用的数据交换形式
  2. HTML:不需要解析就可以直接放到文档中，若仅仅更新一部分区域，但传输的数据不是很方便，且HTML代码需要拼接完成
  3. JSON：小巧，有面向对象特征，且有json使用最广泛
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
使用ajax发送数据的五个步骤
第一步：创建异步对象
var xhr = new XMLHttpRequest();

第二步：设置请求方式和请求地址
xhr.open(method,url,asynch);

第三步：用send发送请求
xhr.send(参数);

第四步：监听状态变化
xhr.onreadystatechang=function(){

第五步：让异步对象接收服务器的响应数据
if(xhr.status == 200 && xhr.readyState == 4){ 
console.log(xhr.responseText);
}

jQuery实现Ajax

  1. load(url, [data], [callback])

    • 载入远程 HTML 文件代码并插入至 DOM 中
    • 任何一个html节点都可以使用load方法加载ajax，结果直接插入HTML节点中
    • url:待装入 HTML 网页网址。
    • data:发送至服务器的 key/value 数据，没传数据默认get方法，否则为post
    • callback:载入成功时回调函数。
      1
      2
      3
      4
      var $obj=...;
      var url...;
      var args={key:value};
      $obj.load(url, args, [callback])

  2. jQuery.get(url, [data], [callback], [type])

    • 通过远程 HTTP GET 请求载入信息
    • url:待载入页面的URL地址
    • data:待发送 Key/value 参数
    • callback:载入成功时回调函数
    • type:返回内容格式，xml, html, script, json, text, _default

  3. jQuery.post(url, [data], [callback], [type])

    • 通过远程 HTTP POST 请求载入信息
    • url:发送请求地址。
    • data:待发送 Key/value 参数。
    • callback:发送成功时回调函数。
    • type:返回内容格式，xml, html, script, json, text, _default。

  4. jQuery.getJSON(url, [data], [callback])

    • 通过 HTTP GET 请求载入 JSON 数据
    • url:发送请求地址。
    • data:待发送 Key/value 参数。
    • callback:载入成功时回调函数。
Ajax