谷哥的小弟学后台(22)——AJAX

探索Android软键盘的疑难杂症
@L_301_1@
详解Android主流框架不可或缺的基石
 站在源码的肩膀上全解Scroller工作机制

Android多分辨率适配框架（1）— 核心基础
 Android多分辨率适配框架（2）— 原理剖析
 Android多分辨率适配框架（3）— 使用指南

自定义View系列教程00–推翻自己和过往，重学自定义View
自定义View系列教程01–常用工具介绍
 自定义View系列教程02–onMeasure源码详尽分析
 自定义View系列教程03–onLayout源码详尽分析
 自定义View系列教程04–Draw源码分析及其实践
 自定义View系列教程05–示例分析
 自定义View系列教程06–详解View的Touch事件处理
 自定义View系列教程07–详解ViewGroup分发Touch事件
 自定义View系列教程08–滑动冲突的产生及其处理

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

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"%>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/xmlhttprequest.js"></script>
<title>测试AJAX</title>
</head>
<script type="text/javascript"> window.onload = function() { //第一步：获取XMLHttpRequest var req = getXMLHttpRequest(); //第四步：处理结果 req.onreadystatechange = function(){ if(req.readyState==4){ if(req.status==200){ alert(req.responseText); } } } //第二步：建立连接 req.open("get","${pageContext.request.contextPath }/servlet"); //第三步：发送请求 req.send(null); } </script>
<body>
</body>
</html>

其中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,IOException {
    }

}

运行后效果如下图所示：

原文链接：https://www.f2er.com/ajax/161407.html