js原生态ajax异步处理

原创已于 2025-03-05 13:42:01 修改 · 515 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #异步

于 2017-03-26 13:05:00 首次发布

ajax 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了使用JavaScript通过AJAX实现前后端数据交互的过程，包括客户端如何利用XMLHttpRequest对象发起GET和POST请求，以及服务端如何响应这些请求并处理数据。

前言：
js通过元素id获取元素及元素值的方法

//找到该id 元素的对象
document.getElementById("元素的id");
//找到该id元素的对象
document.getElementById("元素的id").value;的value值

下面就开始吧
一、客户端处理(即前端处理)

	//声明变量,用于保存异步传输对象XMLHttpRequest  
    var xhr; 

	 //首先判断浏览器内核
	 //返回 true 为ie浏览器内核,否则不是ie内核
     if(window.ActiveXObject){
	     
	    //为ie内核创建传输对象的方式 
	    xhr=new window.ActiveXObject("Microsoft.XMLHTTP"); 
     }else{
     
	    //为非ie 内核浏览器创建传输对象的方式
		xhr=  new  XMLHttpRequest();
	 }

	 //定义处理请求的url路径    
	 // get方式提交请求路径后面可以直接跟参数,如:/servlet/test?name=1” ;
	 //post 提交请求 url 后面不能跟参数
	 var url=”/servlet/test.do” ;  


	//如果是get方式发送请求还需编码处理,post则不需要
	//get方式发送请求的编码处理方式 
	//客户端两次编码 服务端一次解码 
	//encodeURI方法用来编码的系统函数
	//第一个参数表示需要编码的字符串
	//第二个参数表示编码格式
	url = encodeURI(url ,” UTF-8” );
	url = encodeURI(url ,” UTF-8” );
	
	
	//定义回调函数 
	//xhr是XMLHttpRequest 对象 
	//xhr.onreadystatechange异步传输对象状态改变事件
	xhr.onreadystatechange=function (){
		
		//xhr.readyState异步传输状态属性,
		//异步传输就绪状态一共有5个值,分别为0、1、2、3、4
		//xhr.readyState==4 表示服务端已经 处理完 请求
		//xhr.status==200 表示服务端 成功 处理请求
		if(xhr.readyState==4 && xhr.status==200){
			
			xhr.responseText;//获取服务端写回来的字符串
			
			/*然后在这里写处理代码*/
		}
	 }
	
	//建立连接,open()方法用来建立连接
	//第一个参数表示发送请求的方式(get或者post)
	//第二个参数表示处理此次请求的url路径
	//第三个参数表示是不是异步的(true是异步的)
	xhr.open(“get”,url,true);

	//如果是post提交请求,想要把参数发送给服务端,
	//必须要在发送请求前加如下代码  
	//xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");


	//get方式发送请求,send()方法中的参数填null
    xhr.send(null);

	//如果用post方式发送请求,send()方法中参数写要发送给服务端的数据
	//xhr.send("name=1&pass=2");

二，服务端处理(及后台处理)

//在doget()方法中调用post()方法,这里用的是servlet
public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request,response);
}

//在post()方法中编写处理程序
public void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {

	//设置服务端的中文编码,不设置此编码 发送中文给客户端会乱码
	response.setContentType("text/html;charset=utf-8");

	//获取客服端传过来的数据
	request.getParameter("name");  

	String mess="这里是写发送给客服端的数据";

	//客户端是get方式提交需要解码，
	//如果客户端是post方式提交请求则不需要此解码，
	//第一个参数表示要解码的字符串
	//第二个参数表示解码的格式	
	URLDecoder.decode(mess,"UTF-8"); 

	//发送数据给客户端(将数据写回到客户端)
	response.getWriter().println(mess);
	
}