(Servlet)Ajax

qubianzhong

发布于 2018-08-10 16:41:50

80100

代码可运行

文章被收录于专栏：行者常至行者常至

运行总次数：0

代码可运行

Ajax的定义

Asynchronous JavaScript and Xml 异步的JavaScript和Xml
Ajax是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发送请求
服务器返回部分数据，而不是一个完整的页面，以页面无数新的效果更改页面中的局部内容

Ajax工作原理

如何获得Ajax对象

function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    } else{
        xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
    return xhr;
}

异步对象的属性和方法

属性/方法	说明
abort()	取消请求
getAllResponseHeaders()	获取相应的所有Http头
getResponseHeader()	获取指定的Http头
open(method,url)	创建请求，method请求类型 get post
send()	发送请求
setRequestHeader()	指定请求的Http头
onreadystatechange	发生任何状态变化时的事件控制对象
readyState	请求的状态
	0尚未初始化
	1正在发送请求
	2请求完成
	3请求成功，正在接收数据
	4数据接收成功
responseTest	服务器返回的文本
responseXML	服务器返回的xml，可以当做DOM处理
status	服务器返回的http请求响应值常用的有：
	200 表示请求成功
	202 请求被接受，但处理未完成
	400 错误的请求
	404 资源未找到
	500 内部服务器错误，如asp代码错误等

onreadystatechange

onreadystatechange:绑定一个事件处理函数，该函数用来处理readystatechange事件
注:当Ajax对象的readyState的值发生了改变，比如，从0变成了1，就会产生readystatechange事件

readyState

readyState：一共有5个值，分别是0,1,2,3,4，分别表示Ajax对象与服务器通信的状态
比如，当值为4时，表示Ajax对象已经获得了服务器返回的所有的数据

发送异步请求的步骤

1、获取Ajax对象：获取XMLHttpRequest对象实例
2、设置回调函数：为Ajax对象的readystatechange事件设定响应函数
3、创建请求：调用XMLHttpRequest对象的open方法
4、发送请求：调用Ajax对象的send方法

1、获取Ajax对象

function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    } else{
        xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
    return xhr;
}

2、编写回调事件处理函数

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        var txt = xhr.responseText;
        //DOM操作
    }
}

3.1、创建请求-GET请求

xhr.open('get','xx.do',true);

注意：
true：表示发送异步请求（当Ajax对象发请求时，用户仍然可以对当前页面做其他的操作）
false：表示发送同步请求（当Ajax对象发送请求时，浏览器会锁定当前页面，用户不能对当前页面做其他操作）

3.2、创建请求-POST请求

xhr.open('opst','xx.do',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

setRequestHeader的作用：因为HTTP协议要求发送post请求时，必须有content-type消息头，但是默认情况下xhr（即Ajax对象）不会添加该消息头，所以，需要调用setRequestHeader方法，添加这个消息头

4、发送请求

GET  请求  xhr.send(null)
POST 请求  xhr.send(name =value & name = value...)

GET请求：
- send方法内传递null
- 若要提交数据，则在open方法的“URL”后面追加
- 如：xhr.open(“get”,”xx.do?naem=value&name=value”,true) ####编写服务器端代码
- 服务器返回的一般是部分数据，比如一个简单的文本。

public void service(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{
    request.setCharacterEncoding("utf-8");
    response.setContentType("text/html,charset=utf-8");
    PrintWriter.out = response.getWriter();
    out.println("用户名已经存在");
}