Ajax
1.同步交互与异步交互
同步交互；就是发送个请求到服务器端，等待返回，然后再发送下个请求
异步交互；就是发送个请求到服务器端，无需等待返回，直接发送下个请求，不过呢，可能会等待上个请求
2.Ajax是什么
关于HTML页面中能够快速加载到界面病展示个用户，不需要再次加载页面
实现Ajax步骤
<body>
<button id="qyc">按钮</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
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);
}
}
});
</script>
</body>3.实现Ajax异步交互
创建XMLHttpRequest对象
调用XMLHttpRequest对象open()方法
调用XMLHttpRequest对象send()方法
利用XMLHttpRequest对象onreadystatechange事件
readySate属性
<body>
<button id="qyc">按钮</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
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);
})
</script>
</body>4.GET与POST请求方式
GET；创建的请求数据增加到open()方法的url地址中
将发送请求数据的send()方法参数为null值
POST；需要通过XMLHttpRequest对象的setRequestHeader()方法设置请求信息
通过XMLHttpRequest对象的send()发送请求数据
<body>
<form action="#" enctype="application/x-www-form-urlencoded">
<input type="text" id="user" name="user">
<input type="text" id="pwd" name="pwd">
<input type="submit">
</form>
<button id="qyc">按钮</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
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');
});
</script>
</body>JSON数据格式
1.JavaScript中的JSON
<body>
<script>
var jsonString = '{"name" : "犬夜叉"}';
// JSON字符串-该格式符合JSON格式要求，类型就是字符串的类型
var jsonObject = {
name : '犬夜叉'
}
var jsonArr = [1,2,3,4];
// JSON对象-该JSON模式在JavaScript中具体表现只有对象与数组
</script>
</body>2.JSON字符串与JSON对象
<script src="js/json2.js"></script>
</head>
<body>
<script>
var jsonString = '{"name" : "犬夜叉"}';
var jsonObject = JSON.parse(jsonString);
console.log(jsonObject);
var jsonResult = JSON.stringify(jsonObject);
console.log(jsonResult);
// JSON字符串
</script>
</body>Ajax中的JSON
<body>
<button id="qyc">提交</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
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);
});
</script>
</body>Ajax中的XML
<body>
<button id="qyc">按钮</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
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);
}
});
</script>
</body>