小天带你了解ajax
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小天带你了解ajax相关的知识，希望对你有一定的参考价值。
Ajax (asynchronous javascript and xml)
在没有ajax的时候，页面每次提交数据都必须销毁当前的页面，重新从服务器端获得一个页面。这样做不仅影响用户体验，而且会导致流量的浪费（都是钱啊）。为了避免这种情况，google在2005年通过其Goggle Suggest使AJAX变得流行起来。
(1)ajax的定义
在小天看来，ajax的本质就是利用浏览器提供的一个特殊的对象:XMLHttpRequest对象，也可以称为AJAX对象，向服务器发送异步请求。服务器返回部分数据（通常不需要返回完整页面），这样的话，用户的操作就不会被打断，也就避免了多余流量的浪费。
(2)获取ajax对象
首先，既然要利用XMLHttpRequest对象，当然要获取这个对象。但是，由于IE的一些黑历史，仗着自己当年的市场占有率高，就是莽 rua！它的ajax对象叫ActiveXObject。要区分浏览器来获取这个对象。但是jquery等js框架已经将这一步集成了。现在很难想象有人写js会不用jquery。所以这里只是大致了解一下就好了。辣鸡IE。壮哉我大chrome。
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
很难想象当年的IE有多大的勇气才敢逆时代前进。这样不兼容的例子真的很多很多，导致开发者都想放弃IE，更不用说用户了。
弱小和无知不是生存的障碍，傲慢才是。
（3）ajax对象的几个重要的属性
a.onreadystatechange:用来绑定一个事件处理函数，用来处理readystatechange事件。
注：当ajax对象的readyState属性值发生了任何改变（比如从0变成了1），就会产生readystatechange事件
b.readyState:有五个值（0，1，2，3，4），表示ajax对象与服务器通信的状态。其中，当值为4时，表示AJAX对象已经获得了服务器返回的所有数据。
哈哈，小天觉得，记住4就够啦。其他的不太懂。
c.responseText:获得服务器返回的文本数据。
d.responseXML:获得服务器返回的XML数据。
e.status:获得状态码。（比如说200表示成功，404啥的。。500啥的。。不想碰到啊 又想到了被抢课支配的恐惧）
（4）编程步骤
step1.获得ajax对象。（参见（2））
step2.发送请求。
有两种请求get或者post请求，其中区别优劣小天就不赘述了。
情形一 发送get请求
a.调用ajax对象的open方法
xhr.open(请求类型,请求地址,同步/异步（true表示异步）);
ps: ajax也可以发送同步请求，通俗的说，就是浏览器会锁定这个页面，用户感觉不到这个页面的刷新，但是在服务器做出响应之前，根本不可以对页面做出任何的操作。现在已经很少用ajax做同步处理了。拿一个异步的东西做同步，那不是傻吗。( ▼-▼ )。
eg:
xhr.open(‘get‘,‘check_uname.do?name=tom‘,true);
b.绑定事件处理函数
xhr.onreadystatechange=函数名;
eg:
xhr.onreadystatechange=f1;
c.发送请求
xhr.send(null);
情形二 发送post请求
a.xhr.open(‘post‘,‘请求地址‘,true);
b.xhr.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);
c.xhr.onreadystatechange=函数名;
d.xhr.send(‘name=tom‘);
注：b步骤 按照http协议规范，如果发送的是post请求，在请求数据包里面，应该有content-type消息头。默认情况下，ajax对象不带消息头，所以需要调setRequestHeader方法来设置这个消息头。
step3.编写服务器端的程序
serlvet的话 就是通过PrintWriter来返回文本数据就可以了。也可以使用json
至于SpringMVC和ajax的结合，会单开一篇随笔。
step4.编写事件处理函数
function f1(){
//先获得服务器返回的数据
if(xhr.status == 200 && xhr.readyState == 4){
var txt = xhr.responseText;
//利用这些数据（txt）更新页面
...
}
}
（5）实战：注册页面（get请求）
这个算是非常经典的AJAX的案例了。
需求就是：当用户输入用户名之后，判断用户名是否为Sally，如果是，那么文本框之后出现提示用户名已存在，如果不是Sally提示可以使用。
在写的时候，小天发现自己的jquery和javascript已经忘得差不多了( ╯□╰ )，不过还是勉强完成了。之后看来需要复习一下了。这个小案例没有使用jquery，但是对javascript一些很复杂的语法进行了封装。
//js工具类
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
//有种自己编写了jquery的感觉( ▼-▼ )
function $(id){
return document.getElementById(id);
}
function $F(id){
return $(id).value;
}
//jsp页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>regist</title>
<script type="text/javascript" src="js/ajax.js">
</script>
<script type="text/javascript">
function check(){
var xhr = getXhr();
xhr.open(‘get‘,‘check.do?uname=‘+ $F(‘uname‘),true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 &&
xhr.status == 200){
//获得服务器返回的数据
var txt = xhr.responseText;
$(‘uname_msg‘).innerHTML = txt;
}
};
xhr.send(null);
}
</script>
</head>
<body style="font-size:30px;">
<form action="" method="get">
<fieldset>
<legend>注册</legend>
用户名：<input id="uname" type="text" name="uname" onblur="check();" />
<span id= "uname_msg"></span><br/>
密码：<input type="password" name="pwd"/><br/>
<input type="submit" value="注册"/>
</fieldset>
</form>
</body>
</html>
//servlet页面
public class ActionServlet extends
HttpServlet{
public void service(
HttpServletRequest request,
HttpServletResponse response)
throws ServletException,IOException{
System.out.println("service()");
//获得请求资源路径
// http://ip:port/ajax-day01/check.do
String action = request.getServletPath();
//设置编码类型。
response.setContentType(
"text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//依据分析的结果，进行不同的处理
if("/check.do".equals(action)){
String uname =
request.getParameter(
"uname");
System.out.println("uname:"
+ uname);
if("Sally".equals(uname)){
out.println("帐号已经存在（╯－＿－）╯╧╧");
}else{
out.println("可以使用( ?? ω ?? )y");
}
}else if("/getLuck".equals(action)){
Random r = new Random();
int number = r.nextInt(8888);
System.out.println("number:" + number);
out.println(number);
}
}
}
注：这里没有把web.xml贴出来 很简单的配置，就不在此赘述了。
以上是关于小天带你了解ajax的主要内容，如果未能解决你的问题，请参考以下文章