XMLHttpRequest
1.引入
<h3>XMLHttpRequest</h3>
<p id="result"></p>
<script>
var xhr=new XMLHttpRequest;
//设置了请求行
xhr.open('post','8-1.php');
//设置了请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//设置请求主体
xhr.send('name=itcast&age=10');
//接收服务器响应
xhr.onreadystatechange=function(){
if(xhr.readyState=4){
var result=xhr.responseText;
document.getElementById('result').innerHTML=result;
}
}
//还有一些程序等待执行
</script>
2.get&post的差异
var xhr =new XMLHttpRequest;
//xhr.open('get','8-2.php');
xhr.open('post','8-2.php');
//请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
var result=xhr.responseText;
console.log(result);
}
}
3.status
var xhr =new XMLHttpRequest;
xhr.open('get','8-3.php');
xhr.send(null);
xhr.onreadystatechange=function(){
console.log(xhr.status);
if(xhr.readyState==4&&xhr.status==200){
console.log(1);
console.log(xhr.responseText);
}
}
4.ajax不推荐同步
<h3>XMLHttpRequest</h3>
<p id="result"></p>
<script>
var xhr =new XMLHttpRequest;
xhr.open('get','8-4.php',false);
xhr.send(null);
console.log(xhr.responseText);
console.log('我被执行了');
</script>
<?php
header('Content-Type:text/html;charset-utf-8');
echo '测试异步执行';
sleep(s);
?>