Hello小伙伴们大家好,我们了解了怎样写一个网站结构,了解了怎样装饰页面,了解了怎样给页面添加事件,但是又怎样从后台获取数据呢,今天给大家带来的是作为前后端数据桥梁的Ajax的用法。
Ajax简介
首先,我们要知道什么是Ajax。
AJAX 其实就是一种异步的JavaScript 和 XML的结合,用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。这其实对网页的渲染效率起到了非常大的帮助。下图是从网上揪过来的一张图,非常详细的展现出了在数据传输过程中,Ajax起到了一个什么样的工作。
(就是browser向server发起请求,server返回给browser)
Ajax步骤
反正我们最后的目的是通过Ajax完成前后端的交互,那么我们就先了解一下整个数据传输流程吧~~
要完成Ajax的数据传输需要以下步骤:
(1)创建异步调用对象:XMLHttpRequest对象;
(2)创建一个新的HTTP请求,并指定请求的方法、URL及验证信息;
(3)设置响应HTTP请求状态变化的函数;
(4)发送HTTP请求;
(5)获取异步调用返回的数据;
(6)使用JavaScript和DOM实现局部刷新。
Ajax细则
1. 现在我们再来具体介绍一下XMLHttpRequest 对象吧~
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
创建方式就是:
var xmlhttp;
if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest();
}else{ // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2. 请求
将请求发送至服务器,采用XMLHttpRequest对象的open()和send()函数
xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();
一般使用get或post比较多,这里也会涉及到get与post的比较:
get:与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
post:无法使用缓存文件(更新服务器上的文件或数据库);
向服务器发送大量数据(POST 没有数据量限制);
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠。
3. 响应
指的是XMLHttpRequest 对象的 responseText 或 responseXML 属性。
通过这个响应,获取后端传回来的数据。
4. XMLHttpRequest状态
知道这个状态,我们便可以根据状态码获取对象状态,从而在不同的阶段做出不同的处理。
0: 请求未初始化
1: 服务器连接已建立
2. 请求已接收
3. 请求处理中
4. 请求已完成,且响应已就绪
Ajax demo
下面就是一个完整的Ajax的例子~
基于jQuery的Ajax
对于日常开发中,我们可以采用jQuery所封装的Ajax,达到更高效的开发:
小伙伴们有没有对Ajax有所了解呢,但是事实证明有的时候使用Ajax会报错呢,不知道大家发现没发现,没错!会报跨域错误,怎么系统解决跨域错误,且听下回分解~~而且http也是前端开发的小伙伴们很重要的工具,我们后面也会有专题讲到的!