引言：
非TGB的，直接跳过吧……
从开学结束JQuery之后，计算机的进度停了一段时间。某天无聊的时候，又重新把BS的东西拿过来看了看。发现里面有很多既熟悉又陌生的东西。
在学习王兴魁老师的Ajax的时候，里面的东西，大多都是之前学过的。在学习JS的时候，有很多js资料。很多人看的都是牛腩js和姜浩的js。但是我师父让我看李炎恢的js。刚开始的时候感觉挺怪的。牛腩的js一周，姜浩的js 一周。李炎恢的js 150集据说至少看三个星期。
虽然感觉压力大了点。但是等真正看的时候，才发现这150集的内容挺有用的。前面讲解的非常基础。后面通过一个项目，讲解了JQuery是如何从js封装过来的。以及Ajax的入门技术。
在看Ajax的时候，发现基本里面全是学过的东西。现在来学习一下Ajax的基础。并看一个实例。
Ajax基础：
上面啰嗦了半天，现在进入正题。
什么是Ajax？
Ajax缩写：AsynchronousJavaScript and XML 也就是 异步的 js和xml。
利用Ajax可以在向服务器请求数据的时候，客户端不进行刷新。
就是客户端与服务器的交互，可以不间断的进行。
即：客户端发送的请求，不影响客户端的使用。
同步与异步的区别？
同步：
客户端向服务器请求一个数据，页面重新加载（刷新）。
异步：
客户端请求数据。页面上直接得到而不需要刷新。
Ajax技术，可以使得web页面更加友好。不会因为操作一小块的内容，使得整个页面进行刷新。
Ajax的核心技术，就是XmlHttpRequest对象(简称XHR)。这个对象的作用，就相当于，客户端的秘书。
传统的页面设计：
当请求数据的时候，需要等待服务器传回数据之后才能进行下一步操作。（可能造成无响应的状态）
Ajax方式的页面：
客户端发送请求数据的操作之后，仍然可以继续使用。(不会刷新页面)比如，百度的搜索框。不会因为你填写了内容 而停止响应。
XmlHttpRequest对象，作为客户端的“秘书”与服务器进行交互。
Ajax入门：五步学会XmlHttpRequest
html页面：
<!DOCTYPE html>
<!--
To change this license header,choose License Headers in Project Properties.
To change this template file,choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<script type="text/javascript">
var xmlhttp;
function submit() {
//此处省略1-4步骤
}
function callback() {
//此处省略5步骤
}
</script>
</head>
<body>
<div>用户名：</div>
<input type="text" id="userName"/>
<input type="button" onclick="submit()" value="校验" />
<br />
<div id="message"></div>
</body>
</html>
下面是五步流程：
1、创建XmlHttpRequest对象
//1.创建xmlHttpRequest对象
if (window.XMLHttpRequest) {
//IE7,IE8,FireFox,Mozillar,Safari,Opera
//alert("IE7,Opera");
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//IE6,IE5.5,IE5
var activeName = ["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
for (var i = 0; i < activeName.length; i++) {
try {
xmlhttp = new ActiveXObject(activeName[i]);
break;
} catch (e) {
}
}
}
if (xmlhttp === undefined || xmlhttp === null) {
alert("当前浏览器不支持创建xmlhttprequest对象，请更换浏览器");
return;
}
//2.注册回调方法 xmlhttp.onreadystatechange = callback;
注：在注册回调函数的时候，只需要把函数名赋值即可。如果 赋值callback().则赋值为 函数执行的结果值。
3、设置与服务器交互的参数
//3.设置和服务器交互的相应参数（Get）
var userName=document.getElementById("userName").value;
xmlhttp.open("GET","Ajax?name=" + userName,true); //true 表示异步的方式
//3.设置和服务器交互的相应参数（Post）
//xmlhttp.open("POST","AJAX",true);
//xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
4、向服务器发送数据
//4.设置向服务器发送的数据，启动和服务器端的交互
xmlhttp.send(null);
5、判断与服务器交互是否完成，并判断是否有返回数据
//5.判断服务器端的交互是否完成，还要判断服务器端是否返回了数据
if (xmlhttp.readyState === 4) {
//表示和服务器端的交互已经完成
if (xmlhttp.status === 200) {
//表示服务器的响应代码是200，正确的返回了数据
//纯文本接受数据方式
var message = xmlhttp.responseText;
//xml数据对应的dom对象的接受方法
//使用的前提是，服务器端需要设置content-type为text/xml
//var domXml=xmlhttp.responseXML
var messageNode = document.getElementById("message");
messageNode.innerHTML = message;
}
}
注：理解困难的，可以去研究一下xmlhttprequest对象的属性及事件。
仅仅有以上的html，运行结果肯定有问题…… 运行都没有Web服务器。单纯html客户跟谁交互？
此时，应该创建Web服务器。使用tomcat服务器创建servlet
/*
* To change this license header,choose License Headers in Project Properties.
* To change this template file,choose Tools | Templates
* and open the template in the editor.
*/
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 赵崇
*/
public class Ajax extends HttpServlet {
/**
* Processes requests for both HTTP <code>GET</code> and <code>POST</code>
* methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
response.setContentType("text/html;charset=UTF-8");
try (PrintWriter out = response.getWriter()) {
/* TODO output your page here. You may use following sample code. */
String old=request.getParameter("name");
if(old==null){
out.println("用户名不能为空");
}else{
String name=new String(old.getBytes("ISO8859-1"),"gb2312");
System.out.println(name);
if(name.equals("zhaochong")){
out.println("用户名["+ name+"]已经存在，请使用其他用户名");
}else{
out.println("用户名["+ name+"]尚未存在，请使用其他用户名");
}
}
}
}
在创建servlet的时候，只需要修改processRequest函数中的内容。创建servlet的时候，请自动生成xml
以上Demo是在NetBean IDE上进行的。虽然这么一个小例子，发现里面有好多都不懂……比如tomcat与glashfish的区别 以及xml文件中内容的含义等等。看视频的时候，眼看偏了，忽略了 开发环境的配置。
总结
通过以上一个小例子，可以初步了解一下Ajax与传统页面的区别。更加深入的理解，需要在多次重复，在项目中应用，才能熟练掌握。
原文链接：https://www.f2er.com/ajax/164326.html