第一章 AJAX 简介
一、什么是 AJAX ?
- AJAX = 异步 JavaScript 和 XML。
- AJAX 是一种用于创建快速动态网页的技术。
- AJAX 是一种借助XML,HTML,CSS和Java Script创建更好,更快,更交互的Web应用程序的新技术。
- AJAX 是一种独立于Web服务器软件的Web浏览器技术。
- AJAX 使用XHTML作为内容,CSS使用文档对象模型和JavaScript进行动态内容显示。
- 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
- 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
- 使用AJAX,当您点击提交时,JavaScript将向服务器发出请求,解释结果并更新当前屏幕。
- 当客户端程序在后台请求来自服务器的信息时,用户可以继续使用该应用程序。
- 数据驱动而不是页面驱动。
二、AJAX 工作原理
三、AJAX是基于现有的Internet标准
AJAX是基于现有的Internet标准,并且联合使用它们:
- XMLHttpRequest 对象 (异步的与服务器交换数据)
- JavaScript/DOM (信息显示/交互)
- CSS (给数据定义样式)
- XML (作为转换数据的格式)
第二章 AJAX XHR-创建对象
一、AJAX - 创建 XMLHttpRequest 对象
- XMLHttpRequest 是 AJAX 的基础。
- XMLHttpRequest 术语缩写为XHR,中文可以解释为可扩展超文本传输请求。
- XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下,实现局部更新网页。
- XMLHttpRequest的对象用于客户端和服务器之间的异步通信。
- 它执行以下操作:
- 在后台从客户端发送数据
- 更新网页而不重新加载。
- 从服务器接收数据
二、 XMLHttpRequest 对象
创建 XMLHttpRequest 对象的语法:
variable=new XMLHttpRequest();
XMLHttpRequest对象的属性:
属性 | 描述 |
onreadystatechange | 存储函数(或函数名),每当readyState的属性改变时,就会调用该函数。 |
readyState | 存有的XMLHttpRequest的状态从0到4发生变化。 |
responseText | 以文本形式返回响应。 |
responseXML | 以XML格式返回响应 |
status | 将状态返回为数字(例如,“Not Found”为404,“OK”为200) |
statusText | 以字符串形式返回状态(例如,“Not Found”或“OK”) |
XMLHttpRequest对象的方法
方法 | 描述 |
abort() | 取消当前请求。 |
getAllResponseHeaders() | 以字符串形式返回完整的HTTP标头集。 |
getResponseHeader( headerName ) | 返回指定HTTP标头的值。 |
void open(method,URL) | 打开指定获取或交的方法和URL的请求。 |
void open(method,URL,async) | 与上面相同,但指定异步或不。 |
void open(method,URL,async,userName,password) | 与上面相同,但指定用户名和密码。 |
void send(content) | 发送获取请求。 |
setRequestHeader( label,value) | 将标签/值对添加到要发送的HTTP标头。 |
三、AJAX XHR-请求
AJAX 的工作原理
正如您在上面的示例中所看到的,XMLHttpRequest对象起着重要作用。
- 用户从 UI 发送请求,JavaScript 中调用 XMLHttpRequest 对象。
- HTTP 请求由 XMLHttpRequest 对象发送到服务器。
- 服务器使用 JSP,PHP,Servlet,ASP.net 等与数据库交互。
- 检索数据。
- 服务器将 XML 数据或 JSON 数据发送到 XMLHttpRequest 回调函数。
- HTML 和 CSS 数据显示在浏览器上。·向服务器发送请求
使用 XMLHttpRequest 对象的open()和send()方法:
方法 | 描述 |
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
|
send(string) | 将请求发送到服务器。
|
AJAX - 服务器响应
响应主体:xhr.responseText与xhr.responseXML都表示响应主体。
属性 | 描述 |
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
第三章 jQuery Ajax
一、jQuery load() 方法
- jQuery load() 方法是简单但强大的 AJAX 方法。
- load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
- 必需的 URL 参数规定您希望加载的 URL。
- 可选的 callback 参数是 load() 方法完成后所执行的函数名称。
- 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
这是示例文件("demo_test.txt")的内容:
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
二、jQuery - AJAX 请求
$.ajax({ url: '01time.php', type: 'post', data: { id: 1, name: '张三' }, success: function (res) { console.log(res); } });
- url:请求地址
- type:请求方式:get或者post
- data:发送到服务器的数据(将自动转换为请求字符串格式)
发送到服务器的数据,格式是json格式或者json字符串格式。如果是 GET 请求,系统就通过 url 传递;如果是 POST 请求,系统就通过设置请求体传递。
success:请求成功的回调函数
该回调函数中的第一个参数是服务器返回的数据(拿到的只是数据),它会自动根据服务端响应的Content-type 自动转换为对象,如果服务端没有设置响应头Content-type,返回的还是字符串类型的数据。
名称 | 值/描述 |
async | 布尔值,表示请求是否异步处理。默认是 true。 |
beforeSend(xhr) | 发送请求前运行的函数。 |
cache | 布尔值,表示浏览器是否缓存被请求页面。默认是 true。 |
complete(xhr,status) | 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。 |
contentType | 发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。 |
context | 为所有 AJAX 相关的回调函数规定 "this" 值。 |
data | 规定要发送到服务器的数据。 |
dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
dataType | 预期的服务器响应的数据类型。 |
error(xhr,status,error) | 如果请求失败要运行的函数。 |
global | 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
ifModified | 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
password | 规定在 HTTP 访问认证请求中使用的密码。 |
processData | 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
scriptCharset | 规定请求的字符集。 |
success(result,status,xhr) | 当请求成功时运行的函数。 |
timeout | 设置本地的请求超时时间(以毫秒计)。 |
traditional | 布尔值,规定是否使用参数序列化的传统样式。 |
type | 规定请求的类型(GET 或 POST)。 |
url | 规定发送请求的 URL。默认是当前页面。 |
username | 规定在 HTTP 访问认证请求中使用的用户名。 |
xhr | 用于创建 XMLHttpRequest 对象的函数。 |