第13章Ajax技术
13.1 当下谁使用Ajax
百度搜索提示、淘宝新会员注册
13.2 Ajax开发模式与传统模式比较
传统的web应用模式中，将生成一次HTTP请求，而在Ajax应用开发模式中，将变成对Ajax引擎的一次JavaScript调用，不需要整个页面刷新，对部分数据进行更新，从而降低网络流量，给用户带来更好的体验。
13.3 Ajax的使用技术
13.4 使用XMLHttpRequest对象
13.4.1 初始化 XMLHttpRequest对象
- IE浏览器
var httpRequest=new ActiveXObject("Msxml2.XMLHTTP");
或者
var httpRequest=new ActiveXObject("Microsoft.XMLHTTP");
- 非IE浏览器
var httpRequest=new XMLHttpRequest();
- 为了提高程序兼容性，可以创建一个跨浏览器的 XMLHttpRequest对象
var httpRequest;
if(window.XMLHttpRequest){
httpRequest=new XMLHttpRequest(); //非IE浏览器
}else if(window.ActiveXObject){ //IE浏览器
try{
httpRequest=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
httpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
13.4.2 XMLHttpRequest对象的常用方法
- open()方法
用于设置进行异步请求目标的URL、请求方法以及其他参数信息，语法如下
open("method","URL"[,asyncFlag[,"username"[,"password"]]]])
参数说明
- method 用于指定请求的类型，一般为GET或者POST
- URL 用于指定请求地址。可以使用绝对地址或者相对地址，并且可以传递查询字符串
- asyncFlag 为可选参数，true为异步，false为同步，默认为true
- username 为可选参数，指定请求用户名，没有时可省略
- password 为可选参数，用于指定请求密码，没有时可省略
示例
httpRequest.open("GET","reqister.jsp",true);
- send()方法
用于向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接收到响应为止，语法如下
send(content)
参数说明：
content：用于指定发送的数据，可以是DOM对象的实例、输入流或字符串，如果没有参数需要传递，可以设置为null
- setRequestHeader()方法
用于设置HTTP请求头的值。语法如下
setRequestHeader("header","value")
setRequestHeader()方法必须在调用open()方法之后才能调用
示例代码
httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
- abort()方法
用于停止或者放弃当前异步请求 - getResponseHeader()方法
用于以字符串形式返回指定的HTTP头信息，语法如下
getResponseHeader("headerLabel")
参数说明：headerLabel用于指定HTTP头，包括Server、Content-Type和Date等
示例代码
httpRequest.getAllResponseHeaders("Content-Type");
- getAllResponseHeaders()方法
用于以字符串形式返回完整的HTTP头信息，语法如下
httpRequest.getAllResponseHeaders();
13.4.3 XMLHttpRequest对象的常用属性
- onreadystatechange属性
用于指定状态发生改变时所触发的事件处理器
- readyState属性
用于获取请求的状态
| 值 | 意义 | 值 | 意义 |
|---|---|---|---|
| 0 | 未初始化 | 3 | 交互中 |
| 1 | 正在加载 | 4 | 完成 |
| 2 | 已加载 |
-
responseText 属性
获取服务器的响应，表示为字符串 -
responseXML属性
获取服务器的响应，表示为XML，这个对象可以解析为一个DOM对象 -
status 属性
用于返回HTTP状态码，200/202/400/404/500等
13.5 与服务器通信--发送请求和处理响应
13.5.1 示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","./ajax_info.txt",true);
//需要在index.jsp同级目录下，新建ajax_info.txt文件，在ajax_info.txt中写入要更改的内容，点击按钮更改内容
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
13.6 解决中文乱码问题
13.6.1 发送请求时出现中文乱码
String str=request.getParameter("parPorvince");
str=new String(str.getBytes("ISO-8859-1"),"UTF-8"):
13.6.2 获取服务器的响应结果时出现中文乱码
保证从服务器端传递的数据采用UTF-8的编码格式。
13.7 Ajax重构
将通用的代码进行封装
- 1.创建一个单独的JS文件，该文件中编写重构Ajax所需的代码
- 2.引用刚创建的JS文件
- 3.在应用Ajax页面中编写错误处理的方法，实例化Ajax对象的方法和回调函数
网友评论