原生的Ajax

最新推荐文章于 2024-01-13 22:40:12 发布

木木木是我

最新推荐文章于 2024-01-13 22:40:12 发布

阅读量152

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/lx678111/article/details/82914504

版权

Ajax技术介绍:

全称: Asynchronized(异步) JavaScript And Xml

技术组成: Javascript、DOM、CSS 和 XMLHttpRequest(或ActiveXObject)

xhr.readyState属性值:

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

1 (初始化) 对象已建立，尚未调用send方法

2 (发送数据) send方法已调用，但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

四个步骤：

1创建一个ajax对象

2设置通讯方式--get/post, 异步否?

3设置回调函数(访问成功后该调用什么js代码--进行反调父页中的js函数:success,

failure)每次xhr.readyState属性值变化都会自动调用onreadystatechange()函数

4触发发送动作//其中的参数是发送的数据。GET方式中没有，因为它的数据是在url

的末尾给的。

版本1 ：没有进行封装的原生Ajax：

GET方式：


	/*需求:把输入框中的name值用ajax提交到后台ValServlet进行校验，
	把结果返回到当前页面的div中显示 */

     //GET方式///
     function check1(obj){
    	 var name = obj.value; 
    	 
    	 //1创建一个ajax对象
    	 var xhr=null;
    	 ///下面这一段是跨浏览器支持///
    	 if(window.XMLHttpRequest){//高版本IE,火狐，google等
    		 xhr = new XMLHttpRequest();
    	 }else{//低版本IE等
    		 xhr = new ActiveXObject("Microsoft.XMLHttp");
    	 }
    	 
    	 //2设置通讯方式--get/post, 异步否?
    	 var url="<c:url value='/ValServlet?name="+name+"&age=20'/>";
    	 xhr.open("GET", url, true);//异步
    	 //xhr.open("GET", url, false);//同步
    	 
    	 //3设置回调函数(访问成功后该调用什么js代码--进行反调父页中的js函数:succ,failure)
    	 //每次xhr.readyState属性值变化都会自动调用onreadystatechange()函数
    	 xhr.onreadystatechange=function(){
    		 if(xhr.readyState==4){//服务器的响应消息已经接收完毕
    			 if(xhr.status==200){//服务器正常响应
    				 var txt = xhr.responseText;
    				 //alert("服务器正常应答的消息: "+txt);
    				 success(txt);
    			 }else{//错误响应
    				 //alert("服务器应答的错误代码: "+xhr.status);
    			     failure(xhr.status);
    			 }
    		 }
    	 };
    	 
    	 //4触发发送动作
    	 xhr.send(null); //其中的参数是发送的数据。GET方式中没有，因为它的数据是在url的末尾给的
    	 
    	 //若同步时，必须是上面的ajax回调方法执行完毕之后，才会执行下面的代码。异步时不会等，send()之后会立刻执行
    	 //alert("Ajax校验之后的代码....");
      }
    
      function success(txt){
    	  div1.innerHTML="服务器正常应答的消息: "+txt;
      }
      function failure(num){
    	  div1.innerHTML="服务器应答的错误代码:"+num;
      }

Post方式:

function check2(obj) {
		var name = obj.value;

		//1.创建一个ajkx对象
		var xhr = null;
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		} else {
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		}

		//2.设置通信方式————GET OR POST 异步否？
		var url = "<c:url value='/ValServlet'/>"; //※※※post方式下，url中不带参数数据
		xhr.open("POST", url, true);//异步 //※※※
		//xhr.open("POST", url, false);//同步

        //3.设置回调函数 (访问成功后该调用什么js代码--进行反调父页中的js函数:success,failure)
    	 //每次xhr.readyState属性值变化都会自动调用onreadystatechange()函数
    	 xhr.onreadystatechange=function(){
    	     if(xhr.readyState==4){//服务器的响应消息已经接收完毕
    	        if(xhr.status==200){//服务器正常响应
    	           var txt=xhr.responseText;
    	            //alert("服务器正常应答的消息: "+txt);
    				 success2(txt);
    	        }else{//错误响应
    				 //alert("服务器应答的错误代码: "+xhr.status);
    			     failure2(xhr.status);
    	        }
    	     }
    	 };
    	 
    	  //※※※POST方式时，必须设置一个内容类型请求头※※※
    	  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    	  
    	  //4.触发发送动作
    	  xhr.send("name="+name+"&age=20"); //※※※POST方式下，要发送的数据在此以参数的方式给。
    	  
    	   //若同步时，必须是上面的ajax回调方法执行完毕之后，才会执行下面的代码。异步时不会等，send()之后会立刻执行
    	 alert("Ajax校验之后的代码....");
	}
	
	function success2(txt){
    	  div2.innerHTML="服务器正常应答的消息: "+txt;
      }
      function failure2(num){
    	  div2.innerHTML="服务器应答的错误代码:"+num;
      }

版本2：进行封装的Ajax：

Get：

function check2(obj) {
		var name = obj.value;

		//1.创建一个ajkx对象
		var xhr = null;
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		} else {
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		}

		//2.设置通信方式————GET OR POST 异步否？
		var url = "<c:url value='/ValServlet'/>"; //※※※post方式下，url中不带参数数据
		xhr.open("POST", url, true);//异步 //※※※
		//xhr.open("POST", url, false);//同步

        //3.设置回调函数 (访问成功后该调用什么js代码--进行反调父页中的js函数:success,failure)
    	 //每次xhr.readyState属性值变化都会自动调用onreadystatechange()函数
    	 xhr.onreadystatechange=function(){
    	     if(xhr.readyState==4){//服务器的响应消息已经接收完毕
    	        if(xhr.status==200){//服务器正常响应
    	           var txt=xhr.responseText;
    	            //alert("服务器正常应答的消息: "+txt);
    				 success2(txt);
    	        }else{//错误响应
    				 //alert("服务器应答的错误代码: "+xhr.status);
    			     failure2(xhr.status);
    	        }
    	     }
    	 };
    	 
    	 }

POST:

        //※※※POST方式时，必须设置一个内容类型请求头※※※
     function check2(obj){
    	 var name = obj.value; 
    	 var data="name="+name+"&age=20";
    	 var url="<c:url value='/ValServlet'/>";
    	 var ajax = new Ajax();
    	 ajax.post(url,data,success2,failure2);    	
      }
      function success2(txt){
    	  div2.innerHTML="服务器正常应答的消息: "+txt;
      }
      function failure2(num){
    	  div2.innerHTML="服务器应答的错误代码:"+num;
      }

封装的Ajax.js：

function Ajax(){
	
    /GET方式封装///
	this.get=function(url,success,failure){
		 //1创建一个ajax对象
	   	 var xhr=null;
	   	 ///下面这一段是跨浏览器支持///
	   	 if(window.XMLHttpRequest){//高版本IE,火狐，google等
	   		 xhr = new XMLHttpRequest();
	   	 }else{//低版本IE等
	   		 xhr = new ActiveXObject("Microsoft.XMLHttp");
	   	 }
	     //2设置通讯方式--get/post, 异步否?
    	 xhr.open("GET", url, true);//异步
    	
    	 //3设置回调函数
    	 xhr.onreadystatechange=function(){
    		 if(xhr.readyState==4){
    			 if(xhr.status==200){
    				 success(xhr.responseText);
    			 }else{//错误响应
    			     failure(xhr.status);
    			 }
    		 }
    	 };
    	//4触发发送动作
    	 xhr.send(null); 
	};
	
	POST方式封装//
	this.post=function(url,data,success,failure){
		//1创建一个ajax对象
	   	 var xhr=null;
	   	 ///下面这一段是跨浏览器支持///
	   	 if(window.XMLHttpRequest){//高版本IE,火狐，google等
	   		 xhr = new XMLHttpRequest();
	   	 }else{//低版本IE等
	   		 xhr = new ActiveXObject("Microsoft.XMLHttp");
	   	 }
   	 
	   	 //2设置通讯方式post
	   	 xhr.open("POST", url, true);//异步 //※※※
   	 
	   	 //3设置回调函数
	   	 xhr.onreadystatechange=function(){
	   		 if(xhr.readyState==4){
	   			 if(xhr.status==200){
	   				 success(xhr.responseText);
	   			 }else{
	   			     failure(xhr.status);
	   			 }
	   		 }
	   	 };
	   	 
	   	 //※※※POST方式时，必须设置一个内容类型请求头※※※
	   	 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   	 
	   	 //4触发发送动作
	   	 xhr.send(data);
	};
	
}