Ajax

Ajax

一、关于

Ajax是一种异步无刷新技术，向服务器发送请求

二、实现Ajax的步骤

1. 创建XMLHttpRequest对象

2.          var xhr = new XMLHttpRequest();

3. 打开/准备请求：open(参数1,参数2，参数3)
4. • 参数1:请求类型 GET/POST
   • 参数2:请求的路径
   • 参数3:是否异步，默认是异步，true表示异步，false表示同步
5. 发送请求：send(参数：客户端需要传递给后台的数据)
6. • GET请求:

   •          如果有参数，参数是直接跟在请求地址后面的,send方法的值设置为null;如果没有参数，send方法的值也设置为null

   • POST请求：

   •          如果有参数，将参数设置到send方法里;如果没有参数，则send方法的值设置为null

7. 接收响应
8. • 如果是异步请求，需要等待数据完全响应，再接收数据

   •          xhr.readyState == 4

               监听readyStste的值变化，onreadystatechange事件

   • 先判断响应状态

   •          xhr.status == 200,表示响应成功

   • 获取响应结果

   •          xhr.responseText

三、AjaxGet同步示例

<script type="text/javascript">
		// 1、创建XMLHttpRequest对象
		var xhr = new XMLHttpRequest();
		console.log(xhr);
		
		
		// 2、打开/准备请求
		xhr.open("get","js/data.json",false); // 同步请求	
		
		// 3、发送请求
		xhr.send(null);
		
		// 4、接收响应
		if (xhr.status == 200) { // 先判断响应状态
			// 获取响应结果
			var txt = xhr.responseText;
			console.log(txt);
		}
		
		console.log("同步请求....");
		
</script>

运行结果如下：

四、AjaxGet异步示例

<script>
    <!--1.创建xmlhttprequest对象-->
    var xhr= new XMLHttpRequest();

//    打开、准备请求
    xhr.open("get","js/data.json",true);

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

//    监听readyState的值变化
    xhr.onreadystatechange=function(){
        console.log(xhr.readyState);
        if(xhr.readyState==4){
//            接收响应
            if(xhr.status=200){     //先判断响应状态
//                获取响应结果
                var txt=xhr.responseText;
                console.log(txt);
            }
        }
    }

    console.log("异步请求..");

</script>

运行结果如下：

五、AjaxGet封装

<script>
    //同步
    /*var obj2 = {
     url:"js/data.json?a=1",
     async:false,
     success:function(result){
     console.log(result);
     }
     }
     ajaxGet(obj2);*/

    //异步
    var obj3 = {
        url:"js/test.txt",
        async:true,
        success:function(result){
            alert(result);
        }
    }
    ajaxGet(obj3);

    function  ajaxGet(obj){
        //创建XMLHttpRequest
        var xhr=new XMLHttpRequest();
        //打开、准备请求
        xhr.open("Get",obj.url,obj.async);
        //发送请求
        xhr.send(null);
        //接收响应
        if(obj.async){
             //异步请求
            // 监听readyState的值变化，onreadystatechange事件
            xhr.onreadystatechange=function(){
                console.log(xhr.readyState);
                if(xhr.readyState==4){
                    //接收响应
                    if(xhr.status==200){
                        var txt=xhr.responseText;
                        obj.success(txt);
                    }
                }
            }
        }else{
            //同步
            if(xhr.status==200){
                var  txt =xhr.responseText;
                obj.success(txt);
            }
        }
    }
</script>

六、AjaxPost步骤

与get相似，但在第二步向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。

xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);