ajax可以异步访问xml吗,【 Ajax 】之异步交互

Ajax

1.同步交互与异步交互

同步交互；就是发送个请求到服务器端，等待返回，然后再发送下个请求

异步交互；就是发送个请求到服务器端，无需等待返回，直接发送下个请求，不过呢，可能会等待上个请求

2.Ajax是什么

关于HTML页面中能够快速加载到界面病展示个用户，不需要再次加载页面

实现Ajax步骤

按钮

var qyc = document.getElementById('qyc');

qyc.addEventListener('click',function () {

var xhr = createXMLHttpRequest();

xhr.open('get','http://localhost:63342/code/02_%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.html');

xhr.send(null);

xhr.onreadystatechange = function () {

if(xhr.readyState === 4){

console.log(xhr.responseText);

}

}

});

3.实现Ajax异步交互

创建XMLHttpRequest对象

调用XMLHttpRequest对象open()方法

调用XMLHttpRequest对象send()方法

利用XMLHttpRequest对象onreadystatechange事件

readySate属性

按钮

var qyc = document.getElementById('qyc');

qyc.addEventListener('click',function (){

var xhr = createXMLHttpRequest();

// 创建XMLHttpRequest对象

xhr.onreadystatechange = function () {

if (xhr.readyState === 4){

console.log(xhr.status);

if (xhr.status === 200){

console.log(responseText);

}

}

}

xhr.open('get','http://localhost:63342/code/%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.html');

xhr.send(null);

})

4.GET与POST请求方式

GET；创建的请求数据增加到open()方法的url地址中

将发送请求数据的send()方法参数为null值

POST；需要通过XMLHttpRequest对象的setRequestHeader()方法设置请求信息

通过XMLHttpRequest对象的send()发送请求数据

按钮

var qyc = document.getElementById('qyc');

qyc.addEventListener('click',function () {

var xhr = createXMLHttpRequest();

// 创建XMLHttpRequest对象

xhr.onreadystatechange = function () {// 监听服务器端的通信状态

if(xhr.readyState === 4){

console.log(xhr.status);

if (xhr.status === 200){

console.log(xhr.responseText);

}

}

}

xhr.open('post','http://localhost:63342/code/02_%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.html?user=zhangwuji&pwd=123456');

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

// 设置请求头部信息

xhr.send('user=zhangwuji&pwd=123456');

});

JSON数据格式

1.JavaScript中的JSON

var jsonString = '{"name" : "犬夜叉"}';

// JSON字符串-该格式符合JSON格式要求，类型就是字符串的类型

var jsonObject = {

name : '犬夜叉'

}

var jsonArr = [1,2,3,4];

// JSON对象-该JSON模式在JavaScript中具体表现只有对象与数组

2.JSON字符串与JSON对象

var jsonString = '{"name" : "犬夜叉"}';

var jsonObject = JSON.parse(jsonString);

console.log(jsonObject);

var jsonResult = JSON.stringify(jsonObject);

console.log(jsonResult);

// JSON字符串

Ajax中的JSON

提交

var qyc = document.getElementById('qyc');

qyc.addEventListener('click',function(){

var xhr = createXMLHttpRequest();

xhr.onreadystatechange = function(){

if (xhr.readyState === 4 && xhr.status === 200) {

// 接收数据 - JSON数据格式，是字符串类型

var data = xhr.responseText;

// 将符合JSON格式的字符串类型数据进行转换

var json = JSON.parse(data);

// 进行具体处理

console.log(json);

}

}

// 请求数据格式 - user=zhangwuji&pwd=12345

xhr.open('post','server.json');

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

var obj = {

name : '犬夜叉',

age : 16

}

// 将JSON字符串转换成符合请求数据的格式

xhr.send('name=' + obj.name + '&age=' + obj.age);

});

Ajax中的XML

按钮

var qyc = document.getElementById('qyc');

qyc.addEventListener('click',function () {

var xhr = createXMLHttpRequest();

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200){

var data = xhr.responseXML;

//接收数据-responseXML属性-接收XML数据格式

var nameElement = data.getElementsByTagName('name')[0];

// 利用DOM解析XML

console.log(nameElement.textContent);

}

xhr.open('post','server.xml');

xhr.snd(null);

}

});