ajax的使用与理解

ajax的使用与理解

通过百度搜索了解到Ajax是Asynchronous JavaScript XML的简写，不是一门新技术，而是对现有技术的综合利用。这一技术能够向服务器请求额外数据而无需刷新页面，带来了更好的用户体验。

ajax原理

Ajax的工作原理相当于在用户和服 务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

ajax对象

Ajax中最主要的对象是XMLHttpRequest对象，该对象为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步的方式从服务器取得更多的信息，意味着用户单击后，可以不必刷新页面也能获取新数据。

ajax的分类

在学习过程中，我了解到主流使用的Ajax主要是在jQuery中和原生js中，以下分别介绍两者。

原生JavaScript中的ajax

1.创建XMLHttpRequest对象

var Xhr = new XMLHttpRequest();

2.get请求（通过ajax的open和send方法完成）

xmlhttp.open("GET","1.txt",true);
xmlhttp.send();

3.Post请求（通过ajax的open和send方法完成）

xhr.open('post','xxx');//请求报文行，xxx为代码文件   
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
xhr.send('name=rose&age=20'); //请求报文体

4.接收响应

xhr.onreadystatechange=function(){   
     if(xhr.status==200 && xhr.readyState==4){
         var result=xhr.responseText;
         console.log(result); //输出从服务器中获取到的数据
     }
 };

其中，get和post请求的不同之处在于get请求不需要设置请求头

jQuery中的ajax

ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax() 可以不带任何参数直接使用。

// 常用
$.ajax({
 type:"get",//选择get或者post
 url:"",//后台代码文件
 data:{},//数据
 dataType:"json",//数据格式为json
 success:function(data){//请求成功后执行函数
 }
})

同步与异步

一般使用Ajax都会使用异步处理，但不能忘记Ajax也是有同步处理的。
异步处理：通俗的说就是通过事件触发到ajax，请求服务器后，在这个时间段内，无论服务器是否响应，后续代码都可以继续执行。
同步处理：触发Ajax后，等待服务器处理，再到处理完毕返回数据这一过程中，用户必须等待服务器响应完成才能执行后续代码。
在jQuery中async属性就是用来设置同步或者异步。
但是ajax中异步与之前所理解的异步概念是有所区别的，ajax的异步主要是指局部刷新。

全局刷新

通俗理解，就是我们所能看到的界面都是由服务器进行渲染的，服务器把所需要呈现的格式及动态变化都渲染完成，客户端浏览器只需获得代码进行显示即可。

局部刷新

局部刷新并不通过服务器来渲染页面，客户端通过Ajax向服务器请求数据，服务器端只返回数据，渲染由客户端进行完成。如果有一个部分发生改变，则只需重新发送Ajax请求，局部刷新即可。

onreadystatechange

通过查找，我了解到这个事件，在Ajax状态发生改变时，即readyState发生改变会触发该事件的执行，共有五个状态：

属性	描述
onreadystatechange	函数名，每当 readyState 属性改变时，就会调用该函数。
readyState	0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪

Ajax优势

1.局部刷新更新数据。AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
2.实现异步通信。AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
3.功能与界面分离。Ajax使网页中界面与应用分离，有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
4. 不需要插件支持。Ajax 不需要任何浏览器插件，就可以被绝大多数主流浏览器所支持，用户只需要允许javascript在浏览器上即可。
5. 减轻服务器和带宽的负担。Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。它在客户端创建Ajax引擎，把传统方式的下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担。

Ajax的缺陷

1.Ajax的存在相当于直接向数据库建立了一条直接通道，这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。容易被黑客进行远程攻击。而且Ajax并不能很好的支持移动设备。
2. 浏览器前进后退功能削弱。在传统的网页中，用户经常会习惯性的使用浏览器自带的“前进”，“后退”按钮，然而Ajax改变了此Web浏览习惯。在Ajax中 前进，后退按钮都会失效。
3.Ajax对搜索引擎的支持度不高，因为搜索引擎大多利用爬虫将成千上万的数据爬下来，Ajax对此支持度并不高。