前端知识:js原生态ajax异步处理
前言:
js通过元素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);
}
web前端学习;http://www.zhihaijiangku.com