后台(22)——AJAX
探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解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, HttpServletResponse resp) throws ServletException, IOException { } } 运行后效果如下图所示：
