1. Ajax使用注意
通过XHR请求时，不会修改浏览器的历史栈，用户点击后退按钮，会有问题
Ajax不会修改地址栏中显示的链接
不要再页面加入太多JavaScript代码，否则加载很慢
Ajax设计模式 www.ajaxpatterns.org
2. 使用XMLHttpRequest对象
2.1 创建XMLHttpRequest对象实例
var xmlHttp;
function createXMLHttpRequest() {
//判断浏览器是否支持ActiveX对象
if (window.ActiveXObject) {
xmlHttp = new ActiveObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
//使用本地JavaScript来创建XMLHttpRequest对象
xmlHttp = new XMLHttpRequest();
}
}
2.2 XMLHttpRequest方法与属性
方法
1. abort() 停止当前请求
2. open("method", "url", asynch, username, password) 建立对服务器的连接
method可为GET, POST, PUT，一般为GET；asynch一般为true，异步传输
3. send(content) 发送请求，如果为异步则立刻返回，同步则等；content有值，则方法为POST
4. setRequestHeader("header", "value") 设置首部的值，先必须调用open
5. getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回
6. getResponseHeader("header") 返回指定首部的串值
属性
1. onreadystatechange 状态改变会触发事件处理器，通常会调用JavaScript一个函数
2. readyState 0=未初始化，1=正在加载，2=已加载，3=交互中，4=完成
3. responseText 服务器响应，常为一个串
4. responseXML 服务器响应，表示为XML
5. status 200=OK，404=Not Found
6. statusText HTTP状态码的相应文本
2.3 浏览器不缓存结果
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");
2.4 示例
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "simpleResponse.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
alert("The xml replied with: " + xmlHttp.responseText);
}
}
}
</script>
3. 与服务器通信 - 发送请求和处理响应
3.1 使用responseText和innerHTML处理异步请求消息
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
...
}
function startRequest() {
...
}
function handleStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
document.getElementById("results").innerHTML = xmlHttp.responseText;
}
}
}
</script>
<body>
<form action="">
<input type="button" value="search" onclick="startRequest();"/>
</form>
<div id="results"></div>
</body>
3.2 处理XML文档中DOM元素
方法
1. getElementById(id) 获取指定唯一ID属性值文档中的元素
2. getElementsByTagName(name) 返回当前元素中有指定标记名的子元素的数组
3. hasChildNodes() 指示元素是否有子元素
4. getAttribute(name) 返回元素的属性值
属性
1. childNodes 当前元素所有子元素
2. firstChild 第一个子元素
3. lastChild 最后一个子元素
4. nextSibling 紧跟当前元素后的元素
5. nodeValue 一般表示元素中文本的值，譬如<state>Asic</state>，Asic就是nodeValue
6. parentNode 父节点
7. previousSibing 当前元素之前的元素
3.3 处理responseXML
function listNorthStates() {
var xmlDoc = xmlHttp.responseXML;
var northNode = xmlDoc.getElementsByTagName("north")[0];
var out = "Northern States";
var northStates = northNode.getElementsByTagName("state");
outputList("Northern States", northStates);
}
function listAllStates() {
var xmlDoc = xmlHttp.responseXML;
var allStates = xmlDoc.getElementsByTagName("state");
outputList("All States in Docment", allStates);
}
function outputList(title, states) {
var out = title;
var currentState = null;
for (var i = 0; i < states.length; i++) {
currentState = states[i];
out = out + "\n- " + currentState.childNodes[0].nodeValue;
}
alert(out);
}
3.4 动态创建页面内容
1. document.createElement(tagName) 创建由tagName指定的元素
2. document.createTextNode(text) 包含静态文本的节点
3. <element>.appendChild(childNode) 增加节点到子节点中
4. <element>.getAttribute(name)
5. <element>.setAttribute(name, value)
6. <element>.insertBefore(newNode, targetNode)
7. <element>.removeAttribute(name)
8. <element>.removeChild(childNode)
9. <element>.replaceChild(newNode, oldNode)
10. <element>.hasChildnodes() 指定元素是否有子元素
3.5 GET和POST两种方式发送请求参数
function doRequestUsingGET() {
createXMLHttpRequest();
var url= "GetAndPostExample?firstName=He&middleName=Xinyu";
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function doRequestUsingPOST() {
createXMLHttpRequest();
var url = "GetAndPostExample";
var param = "GetAndPostExample?firstName=He&middleName=Xinyu";
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send(param);
}
3.6 POST发送XML请求
一般使用POST来发送XML请求，同时把XML作为一个字符串形式，而不作为文档对象
function createXML() {
var xml = "<pets>";
var options = document.getElementById("petTypes").childNodes;
var option = null;
for(var i = 0; i < options.length; i++) {
option = options[i];
if(option.selected) {
xml = xml + "<type>" + option.value + "<\/type>"；
}
}
//使用"\"，是保证解析时候，方便识别结束标记
xml = xml + "<\/pets>";
return xml；
}
3.7 JSON
用来替代XML，支持两种数据结构：名/值对集合，值的有序表(数组)
集合 {"firstName":John , "lastName":Doe}
数组 {"firstName" , "lastName"}
JavaScript中JSON使用
function doJSON() {
var car = getCarObject();
var carAsJSON = JSON.stringify(car)；
alert("Car object as JSON:\n " + carAsJSON);
var url = "JSONExample?timeStamp=" + new Date().getTime();
createXMLHttpRequest();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(carAsJSON)；
}
function getCarObject() {
return new Car("Dodge", "Coronet R/T", 1968, "yellow")；
}
function Car(make, model, year, color) {
this.make = make;
this.model = model;
this.year = year;
this.color = color;
}
Servlet中JSON使用
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String json = readJSONStringFromRequestBody(request);
JSONObject jsonObject = null;
try {
jsonObject = new JSONObject(json)；
} catch(ParseException pe) {
System.out.println("ParseException: " + pe.toString());
}
String responseText = "You have a " + jsonObject.getInt("year") + " "
+ jsonObject.getString("make") + " " + jsonObject.getString("model")
+ " " + " that is " + jsonObject.getString("color") + " in color.";
response.setContentType("text/xml");
response.getWriter().print(responseText);
}
private String readJSONStringFromRequestBody(HttpServletRequest request) {
StringBuffer json = new StringBuffer();
String line = null;
try {
BufferedReader reader = request.getReader();
while((line = reader.readLine()) != null) {
json.append(line);
}
} catch(Exception e) {
System.out.println("Error reading JSON string: " + e.toString());
}
return json.toString();
}
分享到：
相关推荐
ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax ...
ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础...
《Ajax基础教程.chm》 Ajax技术可以提供高度交互的Web应用，给予用户更丰富的页面浏览体验。本书重点介绍Ajax及相关的工具和技术，主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的...
**AJAX基础教程** 在Web开发领域，AJAX（Asynchronous JavaScript and XML）是一种不可或缺的技术，它使得网页可以在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。本教程将带您深入理解AJAX的基本...
**Ajax（Asynchronous JavaScript and XML）**是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。...通过阅读"Ajax基础教程中文版"，你可以深入了解Ajax的工作原理，学会如何在实践中运用它。
### AJAX基础教程知识点总结 #### 一、AJAX概述 - **定义**：Asynchronous JavaScript and XML（异步JavaScript和XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 - **目的**：提高Web应用的...
原书名：Foundations of Ajax 原出版社： Apress 作者： （美）Ryan Asleson,Nathaniel T.Schutta 译者： 金灵 等 丛书名： 图灵程序设计丛书 出版社：人民邮电出版社 ISBN：7115144818 上架时间：2006-2-14 ...
ajax基础教程(pdf)完整版本，希望对大家有所帮助
本书重点介绍Ajax及相关的工具和技术，主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的Ajax开发工具、使用JsUnit测试JavaScript、分析JavaScript调试工具和技术，以及Ajax开发模式和...
堪称经典由于比较大，压缩成5个压缩卷，大家可以搜索下载，然后解压第一个卷，其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源代码 part1 Ajax基础教程中文版及源代码 part2 Ajax基础教程中文...
堪称经典由于比较大，压缩成5个压缩卷，大家可以搜索下载，然后解压第一个卷，其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源代码 part1 Ajax基础教程中文版及源代码 part2 Ajax基础教程中文...
堪称经典由于比较大，压缩成5个压缩卷，大家可以搜索下载，然后解压第一个卷，其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源代码 part1 Ajax基础教程中文版及源代码 part2 Ajax基础教程中文...
堪称经典由于比较大，压缩成5个压缩卷，大家可以搜索下载，然后解压第一个卷，其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源代码 part1 Ajax基础教程中文版及源代码 part2 Ajax基础教程中文...
堪称经典由于比较大，压缩成5个压缩卷，大家可以搜索下载，然后解压第一个卷，其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源代码 part1 Ajax基础教程中文版及源代码 part2 Ajax基础教程中文...
Ajax基础教程中文版及源代码.part1.rar Ajax基础教程中文版及源代码.part2.rar Ajax基础教程中文版及源代码.part3.rar Ajax基础教程中文版及源代码.part4.rar Ajax基础教程中文版及源代码.part5.rar
根据提供的标题“ajax基础教程002”及描述“ajax基础教程002”，我们可以推断这份文档的主要目的是介绍或讲解Ajax的基础知识。Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，它通过在...
尽管提供的部分内容并未包含实际的教程信息，但从标题“ajax基础教程003”及描述“ajax基础教程003”来看，这里将围绕Ajax的基础知识进行展开。 ### Ajax基础知识 #### 1. 什么是Ajax？ Ajax（Asynchronous ...
书中讲解了ajax出现得背景,绝对最好的入门书籍,尤其是把最先进的ajax开发方式介绍给大家 压缩成5个压缩卷，大家可以搜索下载，然后解压第一个卷，其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源...