AJAX学习笔记day2

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