AJAX （GET请求/POST请求 /同步异步）

﹏ヽ暗。殇╰゛Y 2024-04-19 15:57 81阅读 0赞

AJAX（Asynchronous JavaScript and XML），异步的[JavaScript][]与[XML][]技术。

AJAX是浏览器提供的一套API 可以通过Javascript调用 ，从而实现通过代码控制请求与响应，实现网络编程。

在浏览器端进行网络编程（发送请求，接受响应）的技术方案，可以让我们无需重新加载页面，通过javascript  直接获取服务器端的最新内容。

注意：涉及到AJAX “不能” 以文件协议的方式打开

步骤：

// 1.创建对象  安装浏览器（用户代理）
    var  xhr = new XMLHttpRequest()
    
    //2.建立连接   打开浏览器 
    xhr.open('GET','http://learn.php')
    
    //3.发送请求
    xhr.send()
        
       指定事件处理函数
    
    //4.等待响应
    
    //5.结果

注意：XMLHttpRequest   在IE5/6中不兼容

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')

注意：

当readyState ===4    等于  xhr.onload （有兼容性。XMLHttpRequest2.0有的）

3.发送请求后，指定事件处理函数，接受响应

//由于服务器响应需要时间，所以是无法通过返回值的方式 返回响应的数据
    var  response = xhr.send（）
    
    
    //客户端无法知道服务器什么时候才能返回响应，所以AJax API采用事件机制让服务器返回响应后通知我们响应已经结束了
    
    xhr.addEventListener("readystatechange",function(){
            //console.log(this.readyState);
            if(this.readyState !=) 4 return  
            console.log(this.resposeText)
    
        },false);

readystatechange 事件状态改变时就触发。

readyState 有五个状态（ 0  1 2 3 4 ）：

0.   UNSET                          对象被创建

1.   OPENED                       open方法被调用，建立连接

2.   HEADS\_RECEIVED     已经接受到响应报文的响应头

3.   LOADING                      正在下载响应报文的响应体

4.  DONE                             整个响应报文已经接受

XMLHttpRequest 遵循HTTP协议

GET请求

一般不需要设置请求体

POST请求

需要设置请求头请求体，请求头的Content-type 要与请求体的数据格式一致

表单提交数据一般是form-date ，当为Request Rayload 说明请求头与请求体的数据格式不一致

xhr.open('POST',/date.php)   //设置请求行
    xhr.setRequestHeader('FO')      //设置请求头内容
      
    xhr.send({"vauel"：1})   //设置请求体内容 ， 表单提交数据一般 Form-date
    
    xhr.onreadystate= function (){
    
      if(this.readyState ===4) {
    
      console.log(this.status);      //获取响应状态码
      console.log(this.statusText)  //获取响应状态描述
    
      console.log(this.getAllResponseHeaders)     //获取全部响应头
      console.log(this.getResponseHeader('Content-type'))   //获取特定格式的响应头
     
      console.log(this.responseText)     //获取响应体
      console.log(this.responseXML)      //获取xml格式的响应体
     }  
    
    }

响应类型：

this.response : 获取的数据会根据  this.responseType 变化  （二进制数据 ，html5新内容）

this.responseText :   获取的是字符串形式的响应体

客户端、服务器数据传输

1.客户端发送给服务器POST（字符串     send(\`username=$\{username\}&password=$\{password\}\`)）       //GET  send(null)

2.服务器接受客户端    $\_POST\['username'\]                                                                          //GET  $\_GET\['id'\]

3. 服务器传给客户端（json 格式    $json = json\_encoed( $data  echo( $json) )）

4.  客户端接收服务器 json格式数据转为数组    var data = JSON.parse(this.responseText)

同步、异步

同步：先吃饭 ，后打电话

异步：边吃饭边听电话

open（）方法