Ajax基础教程

overkill

浏览: 65429 次
性别:
来自: 北京

最近访客更多访客>>

lehmann_ding

Deret.H

想要飞天的猪

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web开发

Ajax json JavaScript XML 浏览器

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 示例

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处理异步请求消息

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>

</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();

}

分享到：

Java编程思想(第四版) - 第1章对象导论 | Enterprise JavaBean3.0 (第5版)

2009-01-15 13:40
浏览 912
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论