Ajax
1.同步交互和异步交互
同步交互:就是客户端浏览器给服务端发送一个请求,服务端返回一个页面,返回的页面会把之前的界面覆盖
异步交互:就是客户端浏览器给服务端发送一个请求,服务器返回数据,返回的数据不会把之前的界面覆盖
2,运用的场景:
Ajax主要运用的场景,页面不会刷新,就可以与服务端进行动态的交互;
就你如说:百度的注册页面,检测用户名是否存在,失去焦点发送请求
也可以用来做性能优化,比如一个页面非常庞大,这个页面不可能一次加载完毕
3.交互原理
我们在浏览器怎么给服务器发送请求,点击超链接提交表单,浏览器地址,输入地址,都是给服务器发送请求(就比如说:我们输入关键字,触发一个事件,执行一个方法,调用js的这个api,通过这个api,给服务器发送请求,通过api,接收数据,然后把接收到的数据,通过dom把这个数据写道页面上,就完成了异步交互)
4.在javascript中,ajax是通过XMLHttpRequest对象来实现的,这个对象用于和后台进行数据的交互。在ie7之前,XHR是通过MSXML库中的ActiveX对象实现的,ie7后我们可以直接使用 var xhr = new XMLHttpRequest();创建一个XHR对象,创建好之后,我们就可以通过xhr对象来调用相应的方法了。
5.Ajax的请求方式:post和get
ajax 所有参数:
url:请求地址
type:请求方式(GET/POST)
data:要发送的数据
async:同步异步(true/false)
beforsend:发送请求前执行的函数(全局)
success:发送成功之后的回调函数(全局)
error:失败之后执行的回调函数(全局)
6.GET和POST的区别
GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符,有的浏览器是8000个字符
POST:一般用于修改服务器上的资源,对所发送的信息没有限制
在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
7.ajax的本质就是xmlHttpRequest对象,控制台输出这个对象,这个对象上有三个属性:
(1)readyState 请求的五个阶段 0 1 2 3 4
(2)responseText 返回的文件内容
(3)Status 状态吗 返回的状态信息
200 表示成功了
3xxx代表禁用的意思
404代表文件没有找到
5xx代表服务器的问题
在对象上__proto__上有三个方法:
(1)open() 给后台发送请求(get/post,同步异步,请求地址)
(2)send() 发送
(3)onreadystatechange() 服务器响应 (如果发送成功则对返回的数据进行处理)
8.Ajax的使用步骤:
代码: function ajax(method,url,sync,fn){
第一步:创建XmlHttpRequest对象
//如果浏览器是新版本,则支持window.XMLRquest,老IE则后面的版本
var xmlhttp=new XMLHttpRequest();
第二步:发送Ajax请求
//创建Ajax请求(GET为发送请求的方式,true为Ajax异步发送,false为同步)
xmlhttp.open(methods,url,sync);
第三步
//发送到服务器:
xmlhttp.send();
第四步:xmlhttp.status属性服务器状态码,200:成功 404:未找到 500:内部程序错误
xmlhttp.onreadyStateChange=function(){
if(xmlhttp.readystate==4){
if(xmlhttp.status==200){
fn(xmlhttp.responseText)
}
}
}
}
9.jquery中的Ajax
get 所有参数:
url:载入页面的地址
data:向服务器发送的数据(键值对)
success:成功后的回调函数
datatype:返回的内容的数据形式
post 所有参数:
url:载入页面的地址
data:向服务器发送的数据(键值对)
success:成功后的回调函数
datatype:返回的内容的数据形式
用的比较多的是:
$.ajax({
url:'请求后台地址',
type:'get',//默认
dataType:'json',//大部分情况下
success:function(data){
}
});
后面的你就自己去写,jq的Ajax简单一点,代码相对来说少点,这主要看你自己怎么去用
Ajax的优缺点:
Ajax的优点:(1)页面无刷新更新数据
(2)前端和后端负载平衡
(3)基于标准被广泛支持
(4)界面与应用分离
(5)异步与服务器通讯
Ajax的缺点:(1)AJAX的安全问题
(2)对搜索引擎支持较弱
(3)破坏程序的异常处理机制
(4)AJAX不能很好支持移动设备
适合用在 表单驱动的交互,深层次的树的导航,普通文本输入提示和自动完成,对数据进行过滤和操纵相关数据,快速的用户与用户间的交流响应
不适合用在 搜索 ,基本的导航,替换大量的文本,部分简单的表单