【Web】Ajax基本使用

来源：互联网发布：四川卫生统计网络直报编辑：程序博客网时间：2024/06/06 15:00

Ajax

同步的概念

客户端向服务器发送请求，服务器端处理和响应请求，客户端这段时间会被阻塞等待，不能进行其他操作，服务器端响应后需要重新载入整个页面。

异步

客户端向服务器端发送请求，服务器端处理响应时，客户端无需等待，还可以进行其他操作，服务器端响应之后，页面载入通过JavaScript DOM进行页面的局部刷新，不需要重新载入整个页面。

XMLHttpRequest ：通过这个对象可以实现后台和服务器的数据交换，实现网页的部分更新。

一个完整的Http请求的过程

1. 建立TCP连接

2. Web浏览器向Web服务器发送请求命令。

3. Web浏览器发送请求头信息。

4. Web服务器应答

5. Web服务器发送应答头信息。

6. Web服务器向浏览器发送数据。

7. Web服务器关闭TCP连接。

一个Http请求一般由四部分组成

Http请求的方法，get或者post

请求的URL，也就是请求的地址

请求头，包含一些客户端环境信息，身份验证信息。

请求体，包含客户端提交的查询字符串信息，表单信息。

一个Http请求一般由三部分组成

一个数字和文字组成的状态吗，用来显示请求是成功还是失败。

响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型、长度。

响应体，响应正文。

Http状态码由3位数字构成，其中首位数字定义了状态码的类型。

1XX ：信息类，表示收到Web浏览器的请求，正在进一步处理中。

2XX : 成功，表示用户请求被正确接收，处理。如200

3XX：重定向，表示请求没有成功，客户必须采取进一步的动作。

4XX：客户端错误，表示客户端提交的请求有错误，例如：404 Not Found

5XX：服务器错误，表示服务器不能完成对请求的处理：如500

通过XMLHttpRequest发送请求

方法介绍

open(method,url,async);

method: 请求的方法，使用get还是post请求。

url：请求的地址。

async：是否发送异步请求，默认为true。

send(string);

发送的内容。

示例：

request.open(“POST”,”create.jsp”,true);request.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);request.send(“name=a&sex=man”);

通过XMLHttpRequest取得响应

responseText: 获取字符串形式的响应数据。

responseXML: 获得XML形式的响应数据。

status和statusText: 以数字和文本形式返回HTTP状态码。

getAllResponseHeader(): 获取所有的响应报头。

getResponseHeader(); 查询响应中的某个字段的值。

readyState属性

服务器响应成功时得到通知。

0：请求还未初始化，open还没有调用。

1：服务器连接已建立，open已经调用。

2：请求已接收，也就是收到头信息。

3: 请求处理中，也就是接收到响应主体。

4：请求已完成，且响应已就绪。

如何监听服务器响应的状态，通过onreadystatechange方法

var request = new XMLHttpRequest();request.open(“GET”,”get.jsp”,true);request.send();request.onreadstatechange=function(){  if(request.readyState ===4 && request.status === 200){  //响应成功后做一些事情}}

简单示例：例子参考http://blog.csdn.net/sdandan/article/details/4914597

AjaxServlet.java

package com.meng.ajax;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class AjaxServlet extends HttpServlet {private static final String CONTENT_TYPE = "text/xml; charset=gb2312";public void init() throws ServletException {}public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {try {//添加一个睡眠时间，模拟耗时操作Thread.sleep(5000);} catch (InterruptedException e) {e.printStackTrace();}response.setContentType(CONTENT_TYPE);PrintWriter out = response.getWriter();String action = request.getParameter("action");if (("send").equals(action)) {StringBuffer sb = new StringBuffer("<type>");sb.append("<type_name>AA</type_name>");sb.append("<type_name>BB</type_name>");sb.append("<type_name>CC</type_name>");sb.append("<type_name>DD</type_name>");sb.append("</type>");out.write(sb.toString());out.close();}}}

Ajax.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>My JSP 'Ajax.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--></head><script type="text/javascript">/*通过异步传输XMLHTTP发送参数到ajaxServlet，返回符合条件的XML文档*/function getResult(){ var url = "/AjaxDemo/Ajax?action=send"; if (window.XMLHttpRequest) {     req = new XMLHttpRequest(); }else if (window.ActiveXObject){     req = new ActiveXObject("Microsoft.XMLHTTP");    }   if(req){         req.open("GET",url, true);    req.onreadystatechange = complete;       req.send(null);   }} /*分析返回的XML文档*/function complete(){  if (req.readyState == 4){ if (req.status == 200) {       var type = req.responseXML.getElementsByTagName("type_name");  var str=new Array();       for(var i=0;i< type.length;i++){             str[i]=type[i].firstChild.data;           document.all['td'].innerHTML+=str[i]+"";          }  } }}</script><body><table width="80%" border="0" cellspacing="0" cellpadding="0"><tr><td id="td"> </td></tr></table><br/><input type="button" onclick="getResult()" value="get"/><br/><input type="text"/></body></html>

配置web.xml

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">  <display-name>AjaxDemo</display-name>  <servlet>  <servlet-name>Ajax</servlet-name>  <servlet-class>com.meng.ajax.AjaxServlet</servlet-class>  </servlet>  <servlet>    <description>This is the description of my J2EE component</description>    <display-name>This is the display name of my J2EE component</display-name>    <servlet-name>GetJsp</servlet-name>    <servlet-class>com.meng.ajax.GetJsp</servlet-class>  </servlet>  <servlet-mapping>  <servlet-name>Ajax</servlet-name>  <url-pattern>/Ajax</url-pattern>  </servlet-mapping>  <servlet-mapping>    <servlet-name>GetJsp</servlet-name>    <url-pattern>/servlet/GetJsp</url-pattern>  </servlet-mapping></web-app>

使用一个servlet来访问WEB-INF下的jsp页面。

public class GetJsp extends HttpServlet {public GetJsp() {super();}public void destroy() {super.destroy(); // Just puts "destroy" string in log}public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.getRequestDispatcher("/WEB-INF/Ajax.jsp").forward(request, response);}public void init() throws ServletException {// Put your code here}}

从访问结果可以看出，如果我们设置为异步访问，则可以继续进行客户端操作，如果设置为同步访问，则客户端会等待，被阻塞，通过改变open("GET",url, true);第三个参数，可以看到使用Ajax的好处，拥有更好的交互体验。

阅读全文

0 0