Ajax

来源：互联网发布：怎样在mac上qq群视频编辑：程序博客网时间：2024/06/05 19:14

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 stubdoGet(request, response);}}

0 0