AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
有了AJAX我们能异步加载数据,不用整个页面都刷新。可以得到数据并且对网页的局部进行数据更新,使得网站或者网页app的体验得到提升。
AJAX和Vue框架还挺像,vue使用起来非常的轻巧,使得网页层层叠叠的缺点得以改善,而是以更好的更贴近思维的结构出现,那就是vue使得我们的网页更有人情味。AJAX也是可以对局部数据进行更新,我们只需要在需要更新数据时请求相应的数据,之后再渲染到页面上就可以了,使得网站变得姿态万千。
AJAX工作原理
AJAX是基于现有的Internet标准
AJAX是基于现有的Internet标准,并且联合使用它们:
- XMLHttpRequest 对象 (异步的与服务器交换数据)——可以看出掌握AJAX还是很重要的
- JavaScript/DOM (信息显示/交互)
- CSS (给数据定义样式)
- XML (作为转换数据的格式)
下面我们看具体使用:
1.创建的XMLHttpRequest 对象
var xmlhttp;//创建的XMLHttpRequest 对象
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2.向服务器发送请求
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
参数说明:
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
send(string)
将请求发送到服务器。
- string:仅用于 POST 请求
补充:
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
3.获得响应
有发送,我们就要接收来自服务器的数据。
使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
4.现在我们来看一个完整的例子
我们现在来看完整的流程,其实整个流程还是非常简单的,你可以写个小的demo就能熟悉了。
function iAmAFunction()
{
var xmlhttp;//用来XMLHttpRequest对象
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{//特别说明 这里的onreadystatechange是有特殊含义的
if (xmlhttp.readyState==4 && xmlhttp.status==200)//这里的两个判断参数代表了请求的状态 这句代表请求顺利的完成并且响应了
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;//我们请求到的数据xmlhttp.responseText
}
}
xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
xmlhttp.send();
}
特别说明:
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
所以我们必须要设置onreadystatechange 事件来获取数据,也要从这里处理异常。
5.更好的使用AJAX的一个小技巧
下边的代码是在vue上的写法,但是都能看懂
loadXMLDoc: function(url, cfunc) {//专门为亲求流程处理写个函数
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
}
xmlHttp.onreadystatechange = cfunc;
xmlHttp.open("GET", url, true);
xmlHttp.send();
}
getInfo: function() {
var vueOb=this;//获取当前对象 以免在匿名函数内获取不到当前对象
vueOb.$options.methods.loadXMLDoc(
"http://xxxx.xxx/api...你请求的接口",
function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var data = xmlHttp.responseText; //json字符串
var obj = JSON.parse(data);//if括号里的根据自己的需要来写
vueOb.dat=obj.data;
}
}
);
}
我们专门为请求处理的流程写个函数,将参数暴露出来,这样就比较方便使用了。
注:在使用AJAX中可能还会遇到跨域的问题,这里是解决方法的传送门:神奇的传送门