Ajax学习笔记（一）

最新推荐文章于 2025-08-08 06:02:09 发布

少年梦fire

最新推荐文章于 2025-08-08 06:02:09 发布

阅读量771

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： ajax 异步传输 xmlhttp

本文链接：https://blog.youkuaiyun.com/linjinhuo/article/details/42612843

ajax 专栏收录该内容

1 篇文章

订阅专栏

一、什么是Ajax

百度了一下什么是ajax 大致是这么说的。

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

ajax的作用：通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

Ajax浏览器支持:

AJAX 的要点是 XMLHttpRequest 对象。不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。

Ajax原理

二、Ajax使用

XmlHttp属性:

onreadystatechange	指定当readyState属性改变时事件处理句柄.
readyState	返回当前请求的状态
responseText	存储从服务器返回的数据。
responseXML	将响应信息格式化为XML document对象并返回
status	返回当前请求的http状态码

readyState 属性可能的值

状态	描述
0	请求未初始化（在调用 open() 之前）
1	请求已提出（调用 send() 之前）
2	请求已发送（这里通常可以从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用它）

XmlHttp方法

abort	取消当前请求
open	创建一个新的http请求，并指定此请求的方法、URL、以及验证信息
send	发送请求到HTTP服务器并接收响应
setRequestHeader	单独指定请求的某个http头（post方式时使用）

三、Ajax示例

写了例子来演示ajax，用Tomcat6.0作为服务器，Servlet作为业务控制器。该例子模拟注册时输入的用户名验证提示功能。

1.注册页面 reg.jsp

Insert title here


		用户名：  
密码： 
确认密码： 
邮箱：

2.后台业务控制器ControllerTest.java

package com.test;

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;

/**
 * 模拟业务控制器
 * @author Administrator
 *
 */
public class ControllerTest extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// request.setCharacterEncoding("UTF-8"); 对get提交方式无效
		String username = request.getParameter("username");
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html; charset=UTF-8");
		PrintWriter out = response.getWriter();
		if ("smith".equals(username)) {
			out.print("用户名已经存在！");
		} else {
			out.print("用户名" + username + "可以使用！");
		}

	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

	}

}

3.配置文件 web.xml



  Ajax
  
    reg.jsp
    index.htm
    index.jsp
    default.html
    default.htm
    default.jsp
  
  
    
    ControllerTest
    ControllerTest
    com.test.ControllerTest
  
  
    ControllerTest
    /ControllerTest
  





运行结果截图











四、后记
用Ajax方式要自己编写协议信息比较麻烦。
由于例子采用了get请求方式所以会出现中文乱码问题。
关于同步和异步的可以参考这篇博客，他写的很好。
http://blog.youkuaiyun.com/morethinkmoretry/article/details/5791258