Ajax

最新推荐文章于 2024-06-20 09:53:57 发布

BENZBMWAODI

最新推荐文章于 2024-06-20 09:53:57 发布

阅读量287

点赞数

文章标签： Ajax xmlhttprequest

本文链接：https://blog.csdn.net/BENZBMWAODI/article/details/70959637

版权

Ajax技术整个过程

XMLHttpRequest对象发送请求，在与服务器交互的过程中，其readyState状态可以监听到服务器的响应状态，当服务器的响应完成时，XMLHttpRequest负责解析服务器响应，获取响应后，解析出响应的数据，通过DOM操作来加载服务器响应。

XMLHttpRequest的方法

abort() : 停止发送当前请求

getAllResponseHeaders() : 获取服务器返回的全部响应头

getAllResponseHeaders(“headerLabel”) : 根据响应头的名字获取对应的响应头

open(method,url[asynFlag[,username[,password]]]) : 建立与服务器URL的连接，并设置请求的方法，以及是否异步请求

send(content) : 发送请求。其中content是请求参数

setRequestHeader(“label”,”value”) : 在发送请求之前，设置请求头

XMLHttpRequest的属性

onreadystatechange : 该属性用于指定XMLHttpRequest对象的处理状态

readyState : 该属性用于获取XMLHttpRequest对象的处理状态

responseText ：该属性用于获取服务器的响应文本

responseXML ：该属性用于获取服务器响应的XML文档对象

status ：该属性是服务器返回的状态码，只有当服务器的响应完成时，才会有该状态码

statusText ：该属性是服务器返回的状态文本信息，只有当服务器的响应完成时，才会有该状态文本信息。

XMLHttpRequest对应有如下几种状态

0 ：XMLHttpRequest对象还没有完成初始化

1 ： XMLHttpRequest对象开始发送请求

2 ： XMLHttpRequest对象的请求发送完成

3 ： XMLHttpRequest对象开始读取服务器的响应

4 ： XMLHttpRequest对象读取服务器响应结束

XMLHttpRequest对象的readyState属性去上述的值

代码示例

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ajax</title>
	<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
	<p>Ajax测试</p>
	<div id="div"></div>
</body>
</html>

ajax.js

var xmlrequest;
function createXMLhttpRequest(){
	if(window.XMLHttpRequest){
		xmlrequest = new XMLHttpRequest();
	}else if(window.ActiveXObject){
		try{
				xmlrequest = new ActiveXObject("Msxml2.XMLHttp");
		}catch(e){
			try{

				xmlrequest = new ActiveXObject("Microsoft.XMLHttp");
			}catch(e){

			}
		}
	}
}

window.onload = sendmessage;

function sendmessage(){
	createXMLhttpRequest();
	var uri = "Ajax";
	//xmlrequest.open("GET",uri,true);
	xmlrequest.open("POST",uri,true);
	xmlrequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlrequest.send("name=benz");
	xmlrequest.onreadystatechange = function(){
		if(xmlrequest.readyState == 4){
			if(xmlrequest.status == 200){
				var div = document.getElementById("div");
				div.innerHTML += xmlrequest.responseText + "<br>";
			}
		}
	}
	setTimeout("sendmessage()",1000);  //定时器
}

Ajax.java


import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Ajax
 */
@WebServlet("/Ajax")
public class Ajax extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Ajax() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//response.getWriter().append("Served at: ").append(request.getContextPath());
		String param = request.getParameter("name");
		response.getWriter().println("Hello Ajax "+param);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}