1. AJAX
AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。
2. 简介
- AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
- 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显 示。
3. XMLHttpRequest 对象
- 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
- XMLHttpRequest 用于在后台与服务器交换数据。
4. 两种 HTTP 请求方法:GET 和 POST
- GET – 从指定的资源请求数据。
- POST –向指定的资源提交要处理的数据。
5. GET方法:
- GET 请求可能被缓存;
- GET 请求可被收藏为书签;
- GET 请求不应该在处理敏感数据的时候使用;
- GET 请求有长度限制;
- GET 请求只应当用于取回数据。
6. POST 方法:
- POST 请求不会被缓存;
- POST 请求不会保留在浏览器历史记录中;
- POST 不能被收藏为书签;
- POST 请求对数据长度没有要求。
7. 服务器响应
- 如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
- responseText 属性:
- 如果来自服务器的响应并非 XML,请使用 responseText 属性。
- 获得字符串形式的响应数据。
8. responseXML 属性:
- 如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析。
- 获得 XML 形式的响应数据。
9. onreadystatechange 事件
- 当请求被发送到服务器时,我们需要执行一些基于响应的任务。
- 每当 readyState 改变时,就会触发 onreadystatechange 事件。
- readyState 属性存有 XMLHttpRequest 的状态信息。
- 下面是 XMLHttpRequest 对象的三个重要的属性:
- Onreadystatechange => 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
- readyState => 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
3. status
200: "OK"
404: 未找到页面
10. 例:
Form表单填写信息
- 获取Form中填写的信息
- 发送获取到的信息(这里是发送到控制器,使用的方法是POST方法)
- 接收返回值并打印到控制台
控制器
第一种接收的方法(一共写了两种)
结果
- 获取Form中填写的信息
- 发送获取到的信息(这里是发送到控制器,使用的方法是GET方法)
- 接收返回值并打印到控制台
控制器
第二中介收方法
结果