Quantcast
Channel: CSDN博客移动开发推荐文章
Viewing all articles
Browse latest Browse all 5930

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

$
0
0

探索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–滑动冲突的产生及其处理


版权声明


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 {
    }

}

运行后效果如下图所示:

这里写图片描述

作者:lfdfhl 发表于2017/2/19 21:42:53 原文链接
阅读:23 评论:0 查看评论

Viewing all articles
Browse latest Browse all 5930

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>