Ajax相关概念

最新推荐文章于 2024-07-23 09:02:31 发布

是个小白的小李

最新推荐文章于 2024-07-23 09:02:31 发布

阅读量89

点赞数

本文链接：https://blog.csdn.net/weixin_46081459/article/details/109699809

版权

`Ajax`是什么

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

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

尽管Ajax中的“X”代表XML，但由于JSON的许多优势，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中封装数据。

`Ajax`涉及的技术

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

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

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

`Ajax`的核心对象

实现Ajax异步交互的核心就是XMLHttpRequest对象，该对象为客户端提供了在客户端和服务器之间传输数据的功能。
XMLHttpRequest对象提供了一个通过URL来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。
XMLHttpRequest对象最初由微软设计，随后被Mozilla、Apple和Google采纳。如今，该对象已经被W3C组织标准化。通过该对象，可以很容易地得到一个URL上的资源数据。尽管名字里有XML，但XMILHttpRequest对象可以得到所有类型的数据资源，并不局限于XML格式的数据。

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

1.创建Ajax的核心t对象XMLHttpRequest对象

2通过XMIL_HttpRequest对象的open(方法与服务器端建立连接

3.构建请求所需的数据内容，并通过XMLHttpRequest对象的send()方法发送给服务器端

4.通过 XMLHttpRequest对象提供的onreadystatechange事件监听服务器端的通信状态

5.接收并处理服务器端向客户端响应的数据结果

6.将处理结果更新到HTMIL页面中

创建`Ajax`的核心对象

虽然XML HttpRequest对象目前有W3C阻止进行标准化，但在不同浏览器中，创建的方式略有不同。

function createXMLHttpRequest(){
  var httpRequest;
  if(window.XMLHttpRequest){//适用于Chrome,Firefox,Safari,...
     httpRequest = new XMLHttpRequest();
  }else if(window.ActiveXObject){//适用于IE
  try{
    httpRequest = new ActiveXObject("Msxml2.XMLHTTP");//IE 7+
  }catch(e){
    try{
    httpRequest = new ActiveObject("Microsoft.XMLHTTP");//IE 6-
    }catch(e){}
  }
  }
  return httpRequest;
}

通过`Ajax`异步交互请求数据

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

httpRequest.send(data);

data ：表示请求的数据内容

httpRequest.send(null);
httpRequest.send('nME=WOLONGXUEYUAN&PASSWORD=123456');

如果该请求是异步模式（默认），该方法会立刻返回。相反，如果请求是同步模式，咋知道请求的响应完全接受以后，该方法才会返回。

`GET`请求方式

Ajax异步交互中使用GET请求方式的话，需要注意一下几个问题：

1.将构建的请求数据添加到open()方法中的URL地址中，如下示例代码所示：

httpRequest.open('GET','http://www.wolongxueyuan.org/some.file?name=wolongxueyuan&password='123456',true);

上述示例代码中，"name=wolongxueyuan&password=12345"表示请求数据

2.将发送请求数据的send()方法中参数设置为null值，如下示例代码所示：

httpRequest.send(null);

Ajax异步交互中使用POST请求方式的话，需要注意以下几个问题:
1.调用send()方法之前，需要通过XMLHttpRequest对象的信息。

httpRequest.setRequestHeader(header, value);

header:将要被赋值的请求头名称。
value:给指定的请求头赋的值。
```
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
```
2通过XMILHttpRequest对象的send()发送请求数据。