2021-06-08

1. AJAX

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

 

2. 简介

1. AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
2. 简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显 示。

 

3. XMLHttpRequest 对象

1. 所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
2. XMLHttpRequest 用于在后台与服务器交换数据。

 

4. 两种 HTTP 请求方法：GET 和 POST

1. GET – 从指定的资源请求数据。
2. POST –向指定的资源提交要处理的数据。

 

5. GET方法:

1. GET 请求可能被缓存；
2. GET 请求可被收藏为书签；
3. GET 请求不应该在处理敏感数据的时候使用；
4. GET 请求有长度限制；
5. GET 请求只应当用于取回数据。

 

6. POST 方法：

1. POST 请求不会被缓存；
2. POST 请求不会保留在浏览器历史记录中；
3. POST 不能被收藏为书签；
4. POST 请求对数据长度没有要求。

7. 服务器响应

1. 如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
2. responseText 属性:
3. 如果来自服务器的响应并非 XML，请使用 responseText 属性。
4. 获得字符串形式的响应数据。

8. responseXML 属性:

1. 如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析。
2. 获得 XML 形式的响应数据。

9. onreadystatechange 事件

1. 当请求被发送到服务器时，我们需要执行一些基于响应的任务。
2. 每当 readyState 改变时，就会触发 onreadystatechange 事件。
3. readyState 属性存有 XMLHttpRequest 的状态信息。
4. 下面是 XMLHttpRequest 对象的三个重要的属性：

1. Onreadystatechange => 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
2. readyState => 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

             0: 请求未初始化

             1: 服务器连接已建立

             2: 请求已接收

             3: 请求处理中

             4: 请求已完成，且响应已就绪

       3. status

             200: "OK"

             404: 未找到页面

10. 例:

Form表单填写信息

1. 获取Form中填写的信息
2. 发送获取到的信息（这里是发送到控制器，使用的方法是POST方法）
3. 接收返回值并打印到控制台

控制器

第一种接收的方法(一共写了两种)

 

结果

 

1. 获取Form中填写的信息
2. 发送获取到的信息（这里是发送到控制器，使用的方法是GET方法）
3. 接收返回值并打印到控制台

 

 

控制器

第二中介收方法

 

结果