ajax入门篇

什么是ajax

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出[1]。

传统的Web应用允许用户端填写表单（form），当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

与此不同，AJAX应用可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少，服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此Web服务器的负荷也减少了。

类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。虽然其名称包含XML，但实际上数据格式可以由JSON代替，进一步减少数据量，形成所谓的AJAJ。而客户端与服务器也并不需要异步。一些基于AJAX的“派生／合成”式（derivative/composite）的技术也正在出现，如AFLAX

--------来自维基百科

XMLHttpRequest对象

创建XMLHttpRequest对象
```
 var httpRequest=new XMLHttpRequest();
```
XMLHttpResquest对象的一些方法

方法或属性	作用
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求
	请求的类型：GET或者POST
	url：请求的文件在文件在服务器上的位置
	async：true或者false，代表着异步或者同步
send(String )	将请求发送到服务器
	String：仅用于 POST 请求
setRequestHeader(header,value)	使用POST来提交信息要添加 HTTP 头
	header：规定头的名称
	value：规定头的值
responseText	获得字符串形式的响应数据
responseXML	获得 XML 形式的响应数据
onreadystatechange 事件	请求状态改变的事件触发器大概指的是回调函数
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
status	200: “OK” ，404：未找到页面

readyState

请求未初始化
服务器连接已建立
请求已接收
请求处理中
请求已完成，且响应已就绪

随手案例

目录
在这里插入图片描述
index.jsp代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>ajax</title></head><body>用户名：<input type="text" id="username"><input type="submit" value="验证用户名" onclick="checkUsername()"><div id="B"></div></body>
<script type="text/javascript">var httpRequest;function checkUsername() {if (window.XMLHttpRequest) {httpRequest = new XMLHttpRequest();}var name = document.getElementById("username").value;httpRequest.onreadystatechange = function () {if (httpRequest.readyState == 4 && httpRequest.status == 200) {var text = httpRequest.responseText;var div = document.getElementById("B");if(name==text){div.innerText = text;}else {div.innerText="用户名有误";}}//指定回调函数}httpRequest.open("post", "http://localhost:8080/ajaxtest_war_exploded//test.txt", true);httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//请求头httpRequest.send("username=" + name);}</script>
</html>