Ajax/XHR/HTTP/jQuery Ajax

Ajax即通过XHR API使用js发起的异步网络请求,它不会导致页面刷新,因此是现代Web App的关键技术。

HTTP协议是Web开发中最重要的网络协议,HTTP协议详细规定了请求和响应报文。

请求报文由4个部分构成:

  1. 请求行:包含请求方法和URL
  2. 请求头:包含HTTP协议中定义的请求头和自定义请求头(每个头1行)
  3. 空行:分隔请求头与请求体(由协议实现方控制,没有提供API)
  4. 请求体:随请求发送到服务端的数据(可多行)

常用的请求方法是GET和POST。GET没有请求体,数据只能放在URL中,因些可以发送的数据很少,而且用户能够通过浏览器地址栏看到发送的数据。POST请求可以通过请求体发送大量的数据,可以支持各种数据编码方案(需要用Content-Type头指明),常见的有urlencoded、json、xml、text等。其它请求方法在RESTful中常用。

请求头中有一些与协议相关的重要数据,如Content-Type、Content-Length、支持断点续传的Range、携带浏览器信息的UserAgent、还有常用来存储用户身份信息和偏好设置的Cookie等

响应报文也由4个部分构成:

  1. 响应行:包括响应状态码、和状态描述、HTTP版本(最新2.x只用于https,http最新1.x,广泛使用的是1.1)
  2. 响应头
  3. 空行
  4. 响应体

XHR能够灵活地控制HTTP的请求和响应报文:请求行在open方法中控制,请求头通过xhr.setRequestHeader('name', 'value')设置,请求体通过sned方法发送。通过xhr对象的status属性和statusText可以获取响应行信息,通过xhr.getResponseHeader('name')可获取单个响应头,通过xhr.getAllResponseHeaders()可获取所有响应头。通过xhr.response、xhr.responseText、xhr.responseXML可获取响应体。

XHR还支持很多事件,可以监控请求/响应状态的变化,如:

readystatechange最常用

loadstart

progress

abort

error

load

timeout

loadend

jQuery中也包含了对Ajax的强大支持,jQuery框架能获得巨大的成功与其对Ajax的卓越支持是分不开的。在jQuery Ajax是对XHR的封装,它提供了丰富的高级API,可以很方便地发起各种请求,很方便地控制和获取请求/响应报文的各个方面,监听请求/响应状态的变化(包括单次请求和全局监视)

$.ajax({请求配置})

$.get(url, data, success, type)

$.post(url, data, success, type)

此外,jQuery的Ajax还支持JSONP($.getJSON(url, data, success)),支持直接加载HTML到页面$('div').load(url, data, success),支持通过代码加载js脚本$.getScript(url, success)。更值得称赞的是,jQuery的Ajax返回的是Deferred对象,支持Promise异步编程!