同步交互；就是发送个请求到服务器端，等待返回，而后再发送下个请求
异步交互；就是发送个请求到服务器端，无需等待返回，直接发送下个请求，不过呢，可能会等待上个请求html
关于HTML页面中可以快速加载到界面病展现个用户，不须要再次加载页面
实现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.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>
建立XMLHttpRequest对象
调用XMLHttpRequest对象open()方法
调用XMLHttpRequest对象send()方法
利用XMLHttpRequest对象onreadystatechange事件数组
<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>
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>
<body>
<script>
var jsonString = '{"name" : "犬夜叉"}';
// JSON字符串-该格式符合JSON格式要求，类型就是字符串的类型
var jsonObject = {
name : '犬夜叉'
}
var jsonArr = [1,2,3,4];
// JSON对象-该JSON模式在JavaScript中具体表现只有对象与数组
</script>
</body>
<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>
<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>
<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>