本文共 4411 字，大约阅读时间需要 14 分钟。
同步和异步
◼ 同步：必须等待当前事情完成之后，才能进行其他事情
◼ 异步: 不需要等待当前事情完成，同时进行，多件事情互不干扰
AJAX简介
◼ AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
◼ AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
◼ AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下，更新页面的数据。
什么是AJAX
◼ AJAX = 异步 JavaScript 和 XML。
◼ AJAX 是一种用于创建快速动态网页的技术。
◼ 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载
整个网页的情况下，对网页的某部分进行更新。◼ 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
◼ 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
创建 XMLHttpRequest 对象（一）
◼ XMLHttpRequest 对象
◼ 所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
◼ XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网
页的某部分进行更新。◼ 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
var xhr = new XMLHttpRequest()
◼ 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
var xhr = new ActiveXObject(‘Microsoft.XMLHTTP’)
创建 XMLHttpRequest 对象（二）
◼ 为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持
XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对
象。如果不支持，则创建 ActiveXObject ：
readState-onreadystatechange 事件
◼ onreadystatechange 事件
◼ 当请求被发送到服务器时，我们需要执行一些基于响应的任务。
◼ 每当 readyState 改变时，就会触发 onreadystatechange 事件。
◼ readyState 属性存有 XMLHttpRequest 的状态信息。
◼ 0: 请求未初始化
◼ 1: 服务器连接已建立 ◼ 2: 请求已接收 ◼ 3: 请求处理中 ◼ 4: 请求已完成，且响应已就绪 ◼ status ◼ 200: “OK” ◼ 404: 未找到页面
向服务器发送请求
◼如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
◼ open（method,url,async）规定请求的类型、url、以及是否异步处理请求
◼method：请求的类型，GET和POST
◼ url：文件在服务器上的位置
◼ async：true（异步）、false（同步）
◼ send（string）将请求发送到服务器
◼ String：仅用于POST请求
GET、POST区别
◼ 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
◼ 然而，在以下情况中，请使用 POST 请求：
◼ 无法使用缓存文件（更新服务器上的文件或数据库）
◼ 向服务器发送大量数据（POST 没有数据量限制）
◼ 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
服务器响应
◼ 如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
◼ responseText：获得字符串形式的响应数据
◼ responseXML：获得 XML 形式的响应数据
jQuery-AJAX
◼ jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。
◼ jQuery.ajax()
◼ 执行异步 HTTP (Ajax) 请求。
◼ jQuery.getJSON()
◼ 使用 HTTP GET 请求从服务器加载 JSON 编码数据。
◼ jQuery.get()
◼ 使用 HTTP GET 请求从服务器加载数据。
◼ jQuery.post()
◼ 使用 HTTP POST 请求从服务器加载数据。
◼ .load()
◼ 从服务器加载数据，然后把返回到 HTML 放入匹配元素。
◼ .serialize()
◼ 将表单内容序列化为字符串。
◼ .serializeArray()
◼ 序列化表单元素，返回 JSON 数据结构数据。
$.ajax()(一)
◼ ajax() 方法通过 HTTP 请求加载远程数据。
◼ 该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, . p o s t 等 。 ‘ .post 等。` .post等。‘`.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直
接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
◼ settings 可选。用于配置 Ajax 请求的键值对集合。
◼ async
◼ 类型：Boolean， 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
◼ 注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
◼ contentType
◼ 类型：String，默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。
◼ 默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
◼ data
◼ 类型：String,发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。必须为 Key/Value 格式。如果为数组，
jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 '&foo=bar1&foo=bar2’。$.ajax()(二)
◼ url
◼ 类型：String
◼ 默认值: 当前页地址。发送请求的地址。
◼ type
◼ 类型：String
◼ 默认值: “GET”)。请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，
但仅部分浏览器支持。◼ timeout
◼ 类型：Number
◼ 设置请求超时时间（毫秒）。此设置将覆盖全局设置。
◼ success
◼ 类型：Function
◼ 请求成功后的回调函数。
◼ 参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。这是一个 Ajax 事件。
◼ Error
◼ 类型：Function
◼ 默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
$.get()
◼ get() 方法通过远程 HTTP GET 请求载入信息。
◼ 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
$.get(url,data,success(response,status,xhr), dataType)
◼ url:必需。规定将请求发送的哪个 URL。
◼ Data:可选。规定连同请求发送到服务器的数据。
◼ success(response,status,xhr):可选。规定当请求成功时运行的函数。
◼ 额外的参数：
◼ response - 包含来自请求的结果数据
◼ status - 包含请求的状态
◼ xhr - 包含 XMLHttpRequest 对象
◼ datatype
◼ 可选。规定预计的服务器响应的数据类型。
◼ 默认地，jQuery 将智能判断。
◼ 可能的类型：
◼ “xml“、”html”、“text”、“script”、“json”、"jsonp"
$.post()
◼ post() 方法通过 HTTP POST 请求从服务器载入数据。
◼ Data:可选。映射或字符串值。规定连同请求发送到服务器的数据。
◼ success(data, textStatus,xhr):可选。请求成功时执行的回调函数。
◼ dataType:可选。规定预期的服务器响应的数据类型。
◼ 默认执行智能判断（xml、json、script 或 html）
. serialize()
◼ serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。
◼ 您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。
◼ 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
◼ .serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。
◼ .serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如<input>, <textarea>以及<select>。不过，选择 <form>标签本身进
. serializeArray()
◼ serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）。
◼ 您可以选择一个或多个表单元素（比如 input 及/或 textarea），或者 form 元素本身。
◼ 注意：此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。
◼ 返回的 JSON 对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对 —— name 参数和 value 参数。
转载地址：http://kdzwb.baihongyu.com/