Ajax基础教程

最新推荐文章于 2024-07-05 11:41:32 发布

book_overkill

最新推荐文章于 2024-07-05 11:41:32 发布

阅读量76

点赞数

分类专栏： Web开发文章标签： Ajax json JavaScript XML 浏览器 ViewUI

Web开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

}

book_overkill

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax基础教程

1. Ajax使用注意通过XHR请求时，不会修改浏览器的历史栈，用户点击后退按钮，会有问题 Ajax不会修改地址栏中显示的链接不要再页面加入太多JavaScript代码，否则加载很慢 Ajax设计模式 www.ajaxpatterns.org2. 使用XMLHttpRequest对象2.1 创建XMLHttpRequest对象实例var xmlHttp;...
复制链接

扫一扫