后台(22)——AJAX-白红宇

版权声明

本文原创作者：

作者博客地址：

AJAX简介

AJAX(Asynchronous JavaScript And XML)不是一种新的编程语言，它指的是异步JavaScript。利用AJAX可在不重新加载整个页面的情况下与服务器通信并更新部分网页。

XMLHttpRequest

AJAX 的核心是XMLHttpRequest，它是一种支持异步请求的技术。也就是说：在JavaScript中利用XMLHttpRequest可向服务器提出请求并处理响应且不阻塞用户当前操作。

XMLHttpRequest的创建

目前，市面上的大部分浏览器都支持XMLHttpRequest ，但是有的较老的浏览器比如：IE5和IE6却不支持。

所以，可以这么做：

var xmlhttp;if (window.XMLHttpRequest)  {
    //code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {
    //code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }

XMLHttpRequest的常用方法

open(method,url,async)

建立与服务器的连接

method：指定请求方式,比如GET、POST；常用GET方式

url：请求的地址

async：是否使用异步方式请求，默认为true

send(string)

将请求发送到服务器

如果是GET请求那么参数string为null，如果是POST请求那么利用string携带请求参数

setRequestHeader(header,value)

设置请求消息头；很少用到

XMLHttpRequest的常用属性

readyState

readyState用于标识XMLHttpRequest的状态信息

readyState=0表示XMLHttpRequest对象未完成初始化，即刚创建。

readyState=1表示XMLHttpRequest对象开始发送请求；即调用了open方法，但还没有调用send方法，请求还没有发出

readyState=2表示XMLHttpRequest对象的请求发送完成；即send方法已经调用，数据已经提交到服务器，但没有收到任何响应

readyState=3表示XMLHttpRequest对象开始读取响应，还没有结束；即收到了响应消息头，但响应正文还没有收到

readyState=4表示XMLHttpRequest对象读取响应结束，响应消息头和响应正文都已收到

responseText

获得响应的文本内容

responseXML

获得响应的XML文档对象

status

status用于标识Http请求的响应状态码

200 服务器响应正常

400 无法找到请求的资源

403 没有访问权限

404 访问的资源不存在

500 服务器内部错误

XMLHttpRequest的回调函数

每当readyState属性值改变时onreadystatechange函数就会被执行。所以我们可以在该函数中执行一些监听，比如：readyState=4而且status=200时处理服务器返回的数据

XMLHttpRequest使用示例

首先，我们写一个简单的jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
     测试AJAX

其中xmlhttprequest.js如下：

function getXMLHttpRequest(){
         var xmlhttp;        if (window.XMLHttpRequest) {            xmlhttp = new XMLHttpRequest();        } else {            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");        }        return xmlhttp;}

然后，我们再写一个非常简单的Servlet

/** * 本文作者：谷哥的小弟 * 博客地址：http://blog.csdn.net/lfdfhl */package cn.com;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 TestAJAXServlet extends HttpServlet{
         @Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp)            throws ServletException, IOException {        PrintWriter writer = resp.getWriter();        writer.print("Hello AJAX");    }    @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp)            throws ServletException, IOException {    }}

运行后效果如下图所示：

这里写图片描述