ajax简介

1、概述

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），其实XML早已被JSon取代，因为Json更小。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2、格式

<script>    
    //涉及到的AJAX操作的页面“不能”使用文件协议的方式访问    
    //AJAX是一套API 核心提供的类型（构造函数）： XMLHttpRequest
    //xhr 用户代理，就类似于浏览器的作用（发送请求接收响应）

    //创建 xhr 用户代理
    var xhr=new XMLHttpRequest()

    //设置请求行
    xhr.open('GET','http://sample.php?name=zhangsan&age=18')

    //发送请求
    xhr.send(null)

    //等待响应
    xhr.onreadystatechange=function(){ //HTML5中可以用onload事件

        //这个事件不只是响应时触发，状态改变就触发
        if(this.readyState == 4 && this.status=200){
            var result = this.responseText;
            document.querySelector("#result").innerHTML=this.responseText;
        }
    }

 


    //下面是post方式请求：

    //创建请求代理 xhr
    var xhr=new XMLHttpRequest()

    //设置请求行
    xhr.open('post','http://sample.php')

    //设置请求头
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    //发送请求（传入参数）
    xhr.send('name=zhangsan&age=18')

    //等待响应
    xhr.onreadystatechange=function(){ //HTML5中可以用onload事件

        //这个事件不只是响应时触发，状态改变就触发
        if(this.status=200){
            var result = this.responseText;
            document.querySelector("#result").innerHTML=this.responseText;
        }
    }

</script>

 

 

readyState 状态描述 说明

0 UNSENT 代理（XHR）被创建，但尚未调用open()方法。
1 OPENED open()方法已经被调用，建立了连接。
2 HEADERS_RECEIVED send()方法已经被调用，并且可以获取状态行和响应头。
3 LOADING 响应体下载中，responseText属性可能已经包含部分数据。
4 DONE 响应体现在完成，可以直接使用responseText.

xhr.status:200 403 404 对应xhr.statusText:OK forbidden unfinded
xhr.getAllResponseHeaders() 获取全部响应头信息
xhr.getResponseHeader('key') 获取指定头信息
xhr.responseText、xhr.responseXML都表示响应主体

 

注意：GET和POST请求方式的区别:

1、GET没有请求主体，使用xhr.send(null)
2、GET可以通过在请求URL中添加请求参数
3、POST可以通过xhr.send('name=zhangsan&age=18')
4、POST需要设置请求头
5、GET效率高应用多，POST安全
6、GET大小限制4K，POST没有限制