关于Ajax
全称（Asynchronous JavaScript and XML/异步的JavaScript和XML），这不是什么新的编程语言或或技术，而是对于多种技术的综合应用。
-
要之何用？
如果用过早期的浏览器就该有过一种‘忧伤’：注册一个账户，姓名年龄昵称密码等等填完了，点击注册，
用户名已存在，瞬间泪奔。当然，这只戳中一个泪点。那这与Ajax有什么关系？之前的情况是因为提交信息是整个页面提交， 所以所有信息完整后才会去注册，顺便刷新下页面~。难道就不能写了名字就去查询有没有被用吗？当然可以。Ajax，可以在不用提交整个页面的情况下访问服务器。
可以看出，Ajax作用就是在不影响正在浏览页面的情况下‘独自’去向服务端发送请求、获得数据。
-
这是什么？
那到底Ajax是什么？怎么做到的？那就要推出一个
神奇控件：手机，额，不对，是XMLHttpRequest。
先想想一个场景：自己正在介绍自己个人信息，然后突然忘了父母生日什么的。几十年前我们的做法是回家问了再来，现在呢？一边继续填写其他信息一边，打电话或者发短信问下家里，等回短信或电话了再填写刚才漏的。
OK，这里的手机便可以大胆理解为XMLHttpRequest，这个就是页面的电话。 -
怎么使用？
手机打电话也许简单，
XMLHttpRequest呢？功能一样，用起来其实也差不多了...
1. 首先，获得XMLHttpRequest对象
打电话当然的有手机了，所以先创建XMLHttpRequest对象。只是注意的是为了兼容各种浏览器，XMLHttpRequest有所不同，老版本IEXMLHttpRequest叫做ActiveX
2. 发送请求
有手机了就该问家里需要的信息了。open(请求方式, 请求地址, 是否异步)- 请求方式:
GET或者POST，手机还分发短信和打电话呢。这里也有两种方式，也就是HTTP协议中两种请求方式。 - 请求地址：手机获得消息需要手机号吗，
XMLHttpRequest也要服务器地址了。 - 是否异步：
true或false即发短信时候傻傻等着(false)回复呢，还是同时做后面的事(true)~
- 请求方式:
这里值得注意的是POST请求时需要设置请求头setRequestHeader("Content-Type","application/x-www-form-urlencoded");
而GET则不必须
3. 设置回应
接受回应主要分两点：
- 根据回应不同状态判断什么时候成功？
- 成功接受回应后怎么处理？
4. 请求数据
电话通了或者短信过去得告诉想知道什么吧？所以发送时候还得传递参数send(null);
POST参数通过send();传递，而GET则在URL后以键值对形式传递，多个参数用&&分隔。
以上是页面使用Ajax步骤，对应一个简单使用如下
window.onload=function(){AjaxRequest();}//加载页面时调用Ajax，也可以以任意需要的方式，比如输入框按键后onKeyUp,失去焦点等等
var xmlHttp;
//获得xmlHttp对象
function createXMLHttpRequest() {
if (window.ActiveXObject) {//老版本IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {//其他浏览器
xmlHttp = new XMLHttpRequest();
}
}
//Ajax请求
function AjaxRequest() {
//1. 获得xmlHttp对象（买手机）
createXMLHttpRequest();
//添加时间戳防止缓存，也可以加随机数等
var url = " 服务器地址?timeStamp=" + new Date().getTime();
//2. 发送请求（电话？短信？）
xmlHttp.open("POST", url, true);
//3. 设置回应（回掉函数）
xmlHttp.onreadystatechange = stateChange;
//2.设置请求头（POST方式必须）
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//4. 请求数据（POST传参方式）
xmlHttp.send(null);
}
//Ajax请求信息正确返回
function stateChange() {
//4-1. 根据回应不同状态判断什么时候成功？
if (xmlHttp.readyState == 4) {//4表示响应结束
if (xmlHttp.status == 200) {//200表示正确响应
//4-2. 成功接受回应后怎么处理？
parseResults();
}
}
}
//解析数据
function parseResults() {
//获得返回数据
var backData = xmlHttp.responseText;
//具体处理
...
}
服务端
public class DeptsServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String s = 需要返回的信息;
out.println(s);
out.flush();
out.close();
}
}
回顾
Asynchronous JavaScript and XML
JavaScript在页面用了，那XML呢？和这个有什么关系？没有XML也是Ajax？
狭义理解不算，但现在Ajax的定义主要指不刷新页面异步发送请求，因此没用XML也是Ajax。那不XML用什么？
XML主要来返回数据，而上述返回直接字符串，即文本。而一般常用传递方式有三种，根据不同需求选择不同方式
| 文本 | XML | JSON |
--|--|--|
描述能力 | 弱 | 强 | 较强
数据量 | 小 | 大 | 小
复杂度 | 小 | 大 | 小
扩展性 | 弱 | 强 | 强
验证数据 | 不能 | 能 | 不能
安全性 | 安全 | 安全 | 不安全
处理转义字符 | 不能 | 能 | 不能
Ajax的使用现在几乎已无处不在，也体现了他的重要。具体使用中很多的框架都可以让我们很好的使用它，比如jQuery，功能强大， 体积灵巧。具体的使用不同的集成有各自的语法，但最基本的概念流程都是一样的。
---恢复内容结束---
理解Ajax基本概念与用法
关于Ajax
全称（Asynchronous JavaScript and XML/异步的JavaScript和XML），这不是什么新的编程语言或或技术，而是对于多种技术的综合应用。
-
要之何用？
如果用过早期的浏览器就该有过一种‘忧伤’：注册一个账户，姓名年龄昵称密码等等填完了，点击注册，
用户名已存在，瞬间泪奔。当然，这只戳中一个泪点。那这与Ajax有什么关系？之前的情况是因为提交信息是整个页面提交， 所以所有信息完整后才会去注册，顺便刷新下页面~。难道就不能写了名字就去查询有没有被用吗？当然可以。Ajax，可以在不用提交整个页面的情况下访问服务器。
可以看出，Ajax作用就是在不影响正在浏览页面的情况下‘独自’去向服务端发送请求、获得数据。
-
这是什么？
那到底Ajax是什么？怎么做到的？那就要推出一个
神奇控件：手机，额，不对，是XMLHttpRequest。
先想想一个场景：自己正在介绍自己个人信息，然后突然忘了父母生日什么的。几十年前我们的做法是回家问了再来，现在呢？一边继续填写其他信息一边，打电话或者发短信问下家里，等回短信或电话了再填写刚才漏的。
OK，这里的手机便可以大胆理解为XMLHttpRequest，这个就是页面的电话。 -
怎么使用？
手机打电话也许简单，
XMLHttpRequest呢？功能一样，用起来其实也差不多了...
1. 首先，获得XMLHttpRequest对象
打电话当然的有手机了，所以先创建XMLHttpRequest对象。只是注意的是为了兼容各种浏览器，XMLHttpRequest有所不同，老版本IEXMLHttpRequest叫做ActiveX
2. 发送请求
有手机了就该问家里需要的信息了。open(请求方式, 请求地址, 是否异步)- 请求方式:
GET或者POST，手机还分发短信和打电话呢。这里也有两种方式，也就是HTTP协议中两种请求方式。 - 请求地址：手机获得消息需要手机号吗，
XMLHttpRequest也要服务器地址了。 - 是否异步：
true或false即发短信时候傻傻等着(false)回复呢，还是同时做后面的事(true)~
- 请求方式:
这里值得注意的是POST请求时需要设置请求头setRequestHeader("Content-Type","application/x-www-form-urlencoded");
而GET则不必须
3. 设置回应
接受回应主要分两点：
- 根据回应不同状态判断什么时候成功？
- 成功接受回应后怎么处理？
4. 请求数据
电话通了或者短信过去得告诉想知道什么吧？所以发送时候还得传递参数send(null);
POST参数通过send();传递，而GET则在URL后以键值对形式传递，多个参数用&&分隔。
以上是页面使用Ajax步骤，对应一个简单使用如下
window.onload=function(){AjaxRequest();}//加载页面时调用Ajax，也可以以任意需要的方式，比如输入框按键后onKeyUp,失去焦点等等
var xmlHttp;
//获得xmlHttp对象
function createXMLHttpRequest() {
if (window.ActiveXObject) {//老版本IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {//其他浏览器
xmlHttp = new XMLHttpRequest();
}
}
//Ajax请求
function AjaxRequest() {
//1. 获得xmlHttp对象（买手机）
createXMLHttpRequest();
//添加时间戳防止缓存，也可以加随机数等
var url = " 服务器地址?timeStamp=" + new Date().getTime();
//2. 发送请求（电话？短信？）
xmlHttp.open("POST", url, true);
//3. 设置回应（回掉函数）
xmlHttp.onreadystatechange = stateChange;
//2.设置请求头（POST方式必须）
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//4. 请求数据（POST传参方式）
xmlHttp.send(null);
}
//Ajax请求信息正确返回
function stateChange() {
//4-1. 根据回应不同状态判断什么时候成功？
if (xmlHttp.readyState == 4) {//4表示响应结束
if (xmlHttp.status == 200) {//200表示正确响应
//4-2. 成功接受回应后怎么处理？
parseResults();
}
}
}
//解析数据
function parseResults() {
//获得返回数据
var backData = xmlHttp.responseText;
//具体处理
...
}
服务端
public class DeptsServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String s = 需要返回的信息;
out.println(s);
out.flush();
out.close();
}
}
回顾
Asynchronous JavaScript and XML
JavaScript在页面用了，那XML呢？和这个有什么关系？没有XML也是Ajax？
狭义理解不算，但现在Ajax的定义主要指不刷新页面异步发送请求，因此没用XML也是Ajax。那不XML用什么？
XML主要来返回数据，而上述返回直接字符串，即文本。而一般常用传递方式有三种，根据不同需求选择不同方式
| 文本 | XML | JSON |
--|--|--|
描述能力 | 弱 | 强 | 较强
数据量 | 小 | 大 | 小
复杂度 | 小 | 大 | 小
扩展性 | 弱 | 强 | 强
验证数据 | 不能 | 能 | 不能
安全性 | 安全 | 安全 | 不安全
处理转义字符 | 不能 | 能 | 不能
Ajax的使用现在几乎已无处不在，也体现了他的重要。具体使用中很多的框架都可以让我们很好的使用它，比如jQuery，功能强大， 体积灵巧。具体的使用不同的集成有各自的语法，但最基本的概念流程都是一样的。