Ajax

ajax技术

在学习ajax技术前，先来弄明白两个概念，同步交互与异步交互

• 同步：提交请求->等待服务器处理->处理完毕返回给客户端 在此期间客户端浏览器不能干任何事，只能等待

---

• 异步: 请求通过JS事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕

普通的B/S交互模式就是同步交互，这样给用户的体验不好，比如我注册时填写完表单发给服务器，服务器端验证我的用户名已经被别人使用了，然后返回给我一个新的注册页面，什么都要从头填写…
AJAX就是一种异步交互技术

1 什么是Ajax

Ajax：一种不用刷新整个页面便可与服务器通讯的办法.它是Asynchronous JavaScript and XML的缩写。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

2 Ajax技术组成

AJAX:(Asynchronous JavaScript and XML)并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.
1)使用 XML传递数据，XML (eXtensible Markup Language，可扩展标记语言) 是一种描述数据的格式。AJAX 程序需要某种格式在服务器和客户端之间传递数据，XML 是其中的一种选择
2) 使用XHTML+CSS实现基于web标准的数据展示；
3) 使用DOM（Document Object Model）实现动态显示和交互；
5) 使用XMLHttpRequest对象进行异步数据读取
6) 使用JavaScript绑定和处理所有数据
使用Ajax技术的好处：
通过异步交互模式， 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用，最终提升了用户体验

3 jQuery实现ajax异步交互

直接用原生js写ajax异步交互的代码比较繁琐，开发中建议用jQuery包装的方法去实现ajax异步交互。

3.1 jQuery ajax方法

 $.ajax({
    url:'user.action',  //要请求的服务器资源地址
    type:'POST', //提交方式,GET或POST
async:true,    //或false,是否异步,默认是true
 //向服务器发送的参数，可写成json格式{key:value}，也可写成"key= 
// value&key2=valu2..."    
   data: {"name":"zhangsan","age":20 },
    timeout:5000,    //超时时间
    dataType:’text',    //返回的数据格式：json/xml/html/script/jsonp/text
    //服务器处理成功时调用的函数,data是服务器响应回来的数据
    success:function(data){
        console.log(data);
},
//服务器处理失败时调用的函数
    error:function(xhr,textStatus){
        console.log('错误');
        console.log(xhr);
        console.log(textStatus);
}，
//服务器处理完成时调用的函数，不管成功或失败都会调用
complete : function(xhr, text) {
					console.log("处理完成");
					console.log(xhr);
					console.log(text);
		}
});

3.2 jQuery post方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数指定请求的资源路径
可选的 data 参数规定向服务器发送的参数数据。
可选的 callback 参数是请求成功后所执行的函数。

 $.post("ajaxTest.action",
    //请求参数
     {
        name:"中国武汉",
        url:"http://www.whsxt.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });

3.3 jQuery get方法

$.get()方法与上面的$.post()类似，它发送的请求是get请求
下面的例子使用 $.get() 方法从服务器上的一个文件中获取数据：

$("#btn").click(function(){
  $.get("demo_test.txt",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
   });
});

3.4 综合案例

实现注册时验证用户名唯一性，如果输入的用户名已存在，在页面上给出提示“用户名已存在，请更换！”。