Ajax学习笔记(一)
XMLHttpRequest对象详解
1、Ajax应用中我们使用XMLHttpRequest对象异步发送请求，这种请求既可以是GET，也可以是POST，都可以带请求参数。
请求发送出去之后，服务器响应会在合适的时候返回，但是客户端不会自动加载这种异步响应，程序必须先调用XMLHttpRequest对象的responseText或responseXML来获取 服务器响应，再通过DOM操作将服务器响应动态加载到当前页面中。
XMLHttpRequest的用处是：提供与服务器异步通信的能力
2、XMLHttpRequest对象的基本方法：
abort() ：停止发送当前请求
getAllResponseHeaders()：获取服务器返回的全部响应头
getResponseHeaders("headerLabel")：根据响应头的名称，获取对应的响应头
request.open(method, url, async, username, password)建立与服务器的URL链接
send(content):发送请求，Content是请求的参数
setRequestHeader("label","value")在发送请求前设置请求头
3、XMLHttpRequest的基本属性：
onreadystatechange：指定XMLHttpRequest对象状态改变时的事件处理函数
readyState:XMLHttpRequest对象的处理状态
responseText:获取服务器的响应文本
responseXML:获取服务器响应的XML文档对象
status:服务器返回的状态码，只有服务器的响应已经完成才会有该状态码
statusText:服务器返回状态的文本信息
例程：
1.初始化XMLHttpRequest对象
2.打开与服务器的连接
3.设置监听XMLHttpRequest状态改变的事件函数
4.发送请求
5、通常而言，GET请求用于从服务器上获取数据，POST请求用于向服务器发送数据
GET请求将所有的请求参数转换成一个查询字符串，并将该字符串添加到请求的URL之后
如果某个表单的action属性设为GET，则请求会将表单中各字段的值转换成字符串，并附加到URL之后
POST请求则通过HTTP POST机制，将请求的参数以及对应的值放在HTML Header中传输，用户看不到明码的请求参数值
GET请求传输的数据量较小，一般不能大于2KB，POST请求参数的大小不受限制，但往往取决于服务器的限制
当使用Ajax发送异步请求时，建议使用POST请求。
6、中文乱码问题
正常使用POST提交(POST请求默认使用UTF-8字符集来编码请求参数)并且在jsp页面添加(有时也可以不加，因为有的服务器页面默认编码即为UTF-8)setCharacterEncoding
("UTF-8");应该没有乱码。
如果使用GET提交，GET请求将请求参数和对应的值附加在请求的URL之后，对于中文的请求参数值将不再以中文方式传递，而是转码成URL的格式，因此必须在服务器端这样处理：假设服务器端获得的参数是target,先获取value请求参数，再按ISO-8859-1字符集编码成字节数组，然后按UTF-8字符集将该字节数组解码成字符串。
String target=request.getParameter("value");
String a=new String(target.getBytes("ISO-8859-1"),"UTF-8");
这意味着服务器端不能直接获取请求参数，而是必须以流的形式获取请求参数。
8、使用XML响应客户端请求要注意不同浏览器之间的差异，虽然各个浏览器都实现了DOM规范，但它们在细节上依然存在一些差异。返回的XML文档对象需要浏览器的XML解析器的支持。
9、XMLHttpRequest对象的运行周期
(1)Ajax应用总是从创建XMLHttpRequest对象开始，XMLHttpRequest的作用正如它的名字所暗示的，允许通过客户端脚本来发送Http请求，Ajax应用的第一步总是创建一个XMLHttpRequest实例，然后用它来发送请求，GET/POST。
(2)XMLHttpRequest发送完之后，服务器的响应何时到达？应该何时处理服务器的响应呢？这需要借助js的事件机制。XMLHttpRequest也是一个普通的js对象，就如一个普通的按钮或文本框一样，可以触发事件：XMLHttpRequest触发的事件就是onreadystatechange.XMLHttpRequest对象的状态改变时，将触发onreadystatechange事件。为XMLHttpRequest对象的onreadystatechange属性指定事件处理函数，该事件处理函数可以在XMLHttpRequest状态改变时被触发，这个事件处理函数也称回调函数。
(3)XMLHttpRequest状态改变，且readyState为4时，即表明服务器的响应已经完成，此时可以处理服务器响应。
(4)通过js的事件机制，使用事件处理函数监听XMLHttpRequest状态的改变，当XMLHttpRequest的readyState为4，且status为200时，事件处理函数 处理服务器响应。
(5)进入事件处理函数后，XMLHttpRequest对象任然不可或缺，事件处理函数需要借助XMLHttpRequest对象来获取服务器的响应，调用responseText方法或者responseXML方法获取服务器的响应。至此，XMLHttpRequest对象的运行周期结束。
(6)JavaScript通过DOM操作将服务器响应动态加载到HTML页面中。
1、Ajax应用中我们使用XMLHttpRequest对象异步发送请求，这种请求既可以是GET，也可以是POST，都可以带请求参数。
请求发送出去之后，服务器响应会在合适的时候返回，但是客户端不会自动加载这种异步响应，程序必须先调用XMLHttpRequest对象的responseText或responseXML来获取 服务器响应，再通过DOM操作将服务器响应动态加载到当前页面中。
XMLHttpRequest的用处是：提供与服务器异步通信的能力
2、XMLHttpRequest对象的基本方法：
abort() ：停止发送当前请求
getAllResponseHeaders()：获取服务器返回的全部响应头
getResponseHeaders("headerLabel")：根据响应头的名称，获取对应的响应头
request.open(method, url, async, username, password)建立与服务器的URL链接
send(content):发送请求，Content是请求的参数
setRequestHeader("label","value")在发送请求前设置请求头
3、XMLHttpRequest的基本属性：
onreadystatechange：指定XMLHttpRequest对象状态改变时的事件处理函数
readyState:XMLHttpRequest对象的处理状态
responseText:获取服务器的响应文本
responseXML:获取服务器响应的XML文档对象
status:服务器返回的状态码，只有服务器的响应已经完成才会有该状态码
statusText:服务器返回状态的文本信息
例程：
<body>
<select name="first" id="first" size="3" onchange="change(this.value);">
<option value="1" selected="selected">
中国
</option>
<option value="2">
美国
</option>
<option value="3">
小日本
</option>
</select>
<select id="second" size="3"></select><hr/>
<div id="output1"></div>
<div id="output2"></div>
<script type="text/javascript">
function change(id) {
var request = new XMLHttpRequest();
var url = "/Ajax/second.jsp?id=" + id;
request.open("POST", url, true);
//设置请求头
request.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//设置处理响应的回调函数
request.onreadystatechange = function processResponse() {
//测试XMLHttpRequest对象的处理状态readyState属性
//alert(request.readyState);
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
var headers = request.getAllResponseHeaders();
//alert("请求头的类型：" + typeof headers + "\n" + headers);
//在页面中输出所有请求头
document.getElementById("output1").innerHTML = headers;
document.getElementById("output2").innerHTML = request.responseText;
var cityList=request.responseText.split("$");
var displaySelect=document.getElementById("second");
displaySelect.innerHTML=null;
for(var i=0;i<cityList.length;i++){
var option=document.createElement("option");
option.innerHTML=cityList[i];
displaySelect.appendChild(option);
}
} else {
window.alert("你所请求的页面异常！");
}
}
}
request.send(null);
}
</script>
</body>
JSP页面嵌入的代码：
<%
int id=Integer.parseInt(request.getParameter("id"));
System.out.println(id);
switch(id){
case 1:
%>
上海$广州$北京
<%
break;
case 2:
%>
华盛顿$纽约$加州
<%
break;
case 3:
%>
东京$大阪$名古屋
<%
break;
}
%>4、XMLHttpRequest遵循的步骤：
1.初始化XMLHttpRequest对象
2.打开与服务器的连接
3.设置监听XMLHttpRequest状态改变的事件函数
4.发送请求
5、通常而言，GET请求用于从服务器上获取数据，POST请求用于向服务器发送数据
GET请求将所有的请求参数转换成一个查询字符串，并将该字符串添加到请求的URL之后
如果某个表单的action属性设为GET，则请求会将表单中各字段的值转换成字符串，并附加到URL之后
POST请求则通过HTTP POST机制，将请求的参数以及对应的值放在HTML Header中传输，用户看不到明码的请求参数值
GET请求传输的数据量较小，一般不能大于2KB，POST请求参数的大小不受限制，但往往取决于服务器的限制
当使用Ajax发送异步请求时，建议使用POST请求。
6、中文乱码问题
正常使用POST提交(POST请求默认使用UTF-8字符集来编码请求参数)并且在jsp页面添加(有时也可以不加，因为有的服务器页面默认编码即为UTF-8)setCharacterEncoding
("UTF-8");应该没有乱码。
如果使用GET提交，GET请求将请求参数和对应的值附加在请求的URL之后，对于中文的请求参数值将不再以中文方式传递，而是转码成URL的格式，因此必须在服务器端这样处理：假设服务器端获得的参数是target,先获取value请求参数，再按ISO-8859-1字符集编码成字节数组，然后按UTF-8字符集将该字节数组解码成字符串。
String target=request.getParameter("value");
String a=new String(target.getBytes("ISO-8859-1"),"UTF-8");
//上面的对GET方式的处理并不能保证高枕无忧，因为不同的浏览器可能采用不同的字符集编码GET请求参数，所以尽量用POST提交
7、发送XML请求
html代码：
<body>
<select name="first" id="first" style="width: 80px;" size="3" multiple="multiple">
<option value="1" >中国</option>
<option value="2">美国</option>
<option value="3" >日本</option>
</select>
<input type="button" value="发送请求" onclick="send();">
<select name="second" id="second" style="width: 100px;" size="6"></select>
<script type="text/javascript">
//定义创建XML文档的函数
function createXML(){
var xml="<countrys>";
var options=document.getElementById("first").childNodes;
var option=null;
for(var i=0;i<options.length;i++){
option=options[i];
if(option.selected){
xml+="<country>"+option.value+"<\/country>";
}
}
//结束xml文档的根节点
xml+="<\/countrys>";
return xml;
}
function send(){
var request=new XMLHttpRequest();
var url="/Ajax/xml.jsp";
request.open("POST",url,true);
request.onreadystatechange=function(){
//测试XMLHttpRequest对象的处理状态readyState属性
//alert(request.readyState);
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
var headers = request.getAllResponseHeaders();
//alert("请求头的类型：" + typeof headers + "\n" + headers);
//在页面中输出所有请求头
var cityList=request.responseText.split("$");
var displaySelect=document.getElementById("second");
displaySelect.innerHTML=null;
for(var i=0;i<cityList.length;i++){
var option=document.createElement("option");
option.innerHTML=cityList[i];
displaySelect.appendChild(option);
}
} else {
window.alert("你所请求的页面异常！");
}
}
}
request.send(createXML());
}
</script>
</body>
JSP嵌入的代码：
<%
//定义一个StringBuffer对象，用于请求参数
StringBuffer xmlBuffer = new StringBuffer();
String line = null;
//通过request对象获取输入流
BufferedReader reader = request.getReader();
while ((line = reader.readLine()) != null) {
xmlBuffer.append(line);
}
String xml = xmlBuffer.toString();
//dom4j解析xml字符串
Document xmlDoc = new XPPReader().read(new ByteArrayInputStream(xml
.getBytes()));
//获得countrys结点的所有子节点
List countryList = xmlDoc.getRootElement().elements();
//定义服务器响应结果
String result = "";
//遍历所有结点
for (Iterator it = countryList.iterator(); it.hasNext();) {
Element country = (Element) it.next();
if (country.getText().equals("1")) {
result += "$上海$广州$北京";
} else if (country.getText().equals("2")) {
result += "$华盛顿$纽约$硅谷";
} else if (country.getText().equals("3")) {
result += "$东京$大阪$名古屋";
}
}
//向客户端发送响应
out.println(result);
%>从上面的代码可以看出，发送的XML请求依然是POST请求，只是请求参数不再以param=value的形式发送，而是直接采用XML字符串作为参数。
这意味着服务器端不能直接获取请求参数，而是必须以流的形式获取请求参数。
8、使用XML响应客户端请求要注意不同浏览器之间的差异，虽然各个浏览器都实现了DOM规范，但它们在细节上依然存在一些差异。返回的XML文档对象需要浏览器的XML解析器的支持。
9、XMLHttpRequest对象的运行周期
(1)Ajax应用总是从创建XMLHttpRequest对象开始，XMLHttpRequest的作用正如它的名字所暗示的，允许通过客户端脚本来发送Http请求，Ajax应用的第一步总是创建一个XMLHttpRequest实例，然后用它来发送请求，GET/POST。
(2)XMLHttpRequest发送完之后，服务器的响应何时到达？应该何时处理服务器的响应呢？这需要借助js的事件机制。XMLHttpRequest也是一个普通的js对象，就如一个普通的按钮或文本框一样，可以触发事件：XMLHttpRequest触发的事件就是onreadystatechange.XMLHttpRequest对象的状态改变时，将触发onreadystatechange事件。为XMLHttpRequest对象的onreadystatechange属性指定事件处理函数，该事件处理函数可以在XMLHttpRequest状态改变时被触发，这个事件处理函数也称回调函数。
(3)XMLHttpRequest状态改变，且readyState为4时，即表明服务器的响应已经完成，此时可以处理服务器响应。
(4)通过js的事件机制，使用事件处理函数监听XMLHttpRequest状态的改变，当XMLHttpRequest的readyState为4，且status为200时，事件处理函数 处理服务器响应。
(5)进入事件处理函数后，XMLHttpRequest对象任然不可或缺，事件处理函数需要借助XMLHttpRequest对象来获取服务器的响应，调用responseText方法或者responseXML方法获取服务器的响应。至此，XMLHttpRequest对象的运行周期结束。
(6)JavaScript通过DOM操作将服务器响应动态加载到HTML页面中。