Ajax的基本用法

Ajax的基本用法

同步交互与异步交互

交互是什么

同步交互是什么

所谓同步交互，就是指发送一个请求，需要等待返回，然后才能够发送下一个请求。同步交互相当于排队，轮到下一个的情况会因为前一个而有所不同。

说明：就是上一行代码没加载完，下一行不能加载

异步交互是什么

所谓异步交互，就是指指发送一个请求，不需要等待返回，随时可以再发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待。

说明：有请求就响应

异步交互的优势

异步交互相比同步交互的优势主要具有以下几点：

• 用户操作无须像同步交互必须等待结果。
• 异步交互只需与服务器端交换必要的数据内容，而不是将所有数据全部更新。
• 异步交互对带宽造成的压力相比同步交互更小。
• 通过Ajax实现异步交互不需要任何第三方插件，只要浏览器支持JavaScript语言即可实现。

异步交互的劣势

异步交互相比同步交互并不是优势，它也存在一些问题：

• 异步交互破坏了浏览器原有的前进和后退机制。
• 如果后面逻辑的执行依靠前面逻辑执行的结果的话，异步交互可能会造成问题。
• Ajax实现异步交互对搜索引擎支持较弱。
• Ajax实现异步交互会引起一些Web安全问题，例如SQL注入攻击、跨站点脚本攻击等问题。

Ajax是什么

Ajax是Asynchronous JavaScriptXML的缩写，被译为异步JavaScript和XML。Ajax本身并不是一个新技水，而是一个在2005年被Jesse James Garrett提出的新术语，用来描述一种现有技术集合的“新”方法。

当使用Ajax模型，HTML页面能够快速地将数据逐步更新显示在用户界面上，不需要重载（刷新）整个页面。这使得HTML页面能成更快速地对用户的操作进行反馈。

尽管Ajax中的“X”代表XML，但由于JSON的许多优势，目前JSON的使用比XML更加普遍。

尽管Ajax中的“X”代表XML，但由于JSON的许多优势，目前JSON的使用比XML更加普遍。

Ajax涉及的技术

Ajax只是为实现异步交互的手段，不是一种技术，而是多种技术的整合。其中包括以下几种技术：

• HTML页面
• Cascading Style Sheets (CSS)
• JavaScript脚本语言
• Document Object Model (DOM)
• XML
• XMLHttpRequest对象

上述技术中，XMlLHttpRequest对象是实现Ajax异步交互的核心。

Ajax工作原理

说明：Ajax异步交互的整体执行流程过程中，HTML页面是不被更新的。只是更新部分数据内容。

Ajax的核心对象

实现Ajax异步交互的核心就是XMLHttpRequest对象，该对象为客户端提供了在客户端和服务器之间传输数据的功能。

XMLHtpRequest对象提供了一个通过URL来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。

XMLHttpRequest对象最初由微软设计，随后被Mozilla、Apple和Google采纳。如今，该对象已经被W3C组织标准化。通过该对象，可以很容易地得到一个URL上的资源数据。尽管名字里有XML，但XMLHttpRequest对象可以得到所有类型的数据资源，并不局限于XML格式的数据。

实现Ajax异步交互

实现Ajax的执行步骤

实现Ajax异步交互需要服务器端逻辑进行配合，而作为客户端的HTML页面需要完成以下步骤：

1. 创建Ajax的核心对象XMlLHttpRequest对象
2. 通过XMlLHttpRequest对象的open()方法与服务器端建立连接
3. 构建请求所需的数据内容，并通过XMLHttpRequest对象的send()方法发送给服务器端
4. 通过XMLH.ttpRequest对象提供的onreadystatechange事件监听服务器端的通信状态
5. 接收并处理服务器端向客户端响应的数据结果
6. 将处理结果更新到HTML页面中

创建Ajax的核心对象

虽然XMLHttDReauest对象目前由W3C组织进行标准化，但在不同测览器中，创建的方式略有不同。

function crateXMLHttpRequest() {
	var httpReuest;
    if (window.XMLHttpRequest) { // 适用于Chrome, Firefox, Safari, ...
     	httpReuest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // 适用于IE浏览器
     	try {
        	httpReuest = new ActiveXObject('Msxml2.XMLHTTP'); // IE 7+
        } catch (e) {
        	try {
            	httpReuest = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6-
            } catch (e) {}
        }
    }
	return httpReuest;
}

Ajax异步请求数据

通过Ajax异步请求数据是通过XMLHttpRequest对象的send()方法实现，语法结构如下：

httpRequest(data);

• data：表示请求的数据内容。

httpRequest(null);
httpRequest('name=zhangwuji&password=123456');

如果该请求是异步模式(默认)，该方法会立刻返回。相反，如果请求是同步模式，则直到请求的响应完全接受以后，该方法才会返回。

XMLHTTPRequst对象

创建XMLHTTPRequst对象

var xhr = crateXMLHttpRequest();

对象方法

• open()方法

  xhr.open(method,url)
  

  参数：

  • method：表示当前的方式
    常见的请求方式为GET和POST
  • url：表示当前请求的服务器湍地址链接

  作用：与服务器建立连接

• send(date)方法

  xhr.send(data)
  

  • 参数：data：表示要向服务器端发送的请求数据
  • 作用：将客户端满页面的数据发送给服务器端
  • 请求方式
    • 如果当前的请求方式为GET的话- send()方法中只能传递null值
      • 将请求数据添加到请求地址链接中
  • 两种情况
    • 发送数据 ?user=zhangwuji&pwd=123456 4
      • 请求数据的格式
        1. 如果具有多个请求数据的话，之间使用"&"进行分隔
        2. 每个数据格式name=value
        • 不发送数据send()方法中必须传递null值，而不能为空

对象事件

onreadystatechange事件：

• 作用：用于监听服务器端的通信状态
• 服务器端的通信状态中存在着处理完毕(信号)
  • 接收服务器端返回的处理结果

对象属性

• readyState属性
  • 作用：表示服务器端的通信状态
  • 返回的值：
    • 0：未初始化
    • 1：open()方法被调用
    • 2：send()方法被调用
    • 3：正在响应
    • 4：响应已完毕
• status属性
  得到当前请求之后的响应状态码
• responseText属性
  接收服务器端返回的处理结果XMLHttpRequest对象的responseText属性
  • 作用：内容专门接收字符串类型的结果
• responseXML属性
  专门接收XML数据格式的结果内容