ajax本质上是一个什么意思,ajax本质

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

ajax作用:在不刷新整个页面情况下,更新部分网页

ajax实质:ajax全部的工作都由一个对象来做,XMLHttpRequest对像(简写xmlhttp)

先给一个简单的使用xmlhttp来发送ajax请求的例子

function loadXMLDoc()

{

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","/ajax/test1.txt",true);

xmlhttp.send();

}

Let AJAX change this text

创建XMLHttpResponse对象:

xmlhttp=new XMLHttpRequest() 是后来的浏览器才支持

更早的用 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

先用 if(window.XMLHttpRequest) 来判断支持,选择用哪种方式来创建该对象

发送请求:

xmlhttp.open() xmlhttp.send()

可以通过open()的参数来配置 是 get 或者 post方式

post和get区别

1 post无法使用缓存

2 get发送参数的长度有限制

3 post比get更安全

分析

1 只能记了

2 get的参数放在url中,url长度有限制

3 post的请求数据放在数据报中,get放在url中

post方法设置请求参数示例:

xmlhttp.open("post",url,true);

xmlhttp.setRequestHeader("Content-type","application/x-www-from-urlencoded");

xmlhttp.send("fname=Bill&name=Gates");

setRequestHeader()方法 来添加 HTTP 头 至于为什么这样用? 不知道

响应:

xmlhttp.responseText 或者 xmlhttp.resonseXml

也就是说执行完请求以后,如果执行成功,那么不用任何操作,只需要访问xmlhttp的这两个对象即可

访问到响应的结果

就像示例中的这样 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXml与resonseText区别:两者的数据格式是不同的 responseText是字符串,responseXml是xml格式

xmlhttp状态标示:

readyState、status、onreadystatechange

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成,且响应已就绪

status:

200: "OK"

404: 未找到页面

onreadystatechange

函数,当readyState改变时被触发

此时再来看示例中的这段代码是什么意思

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

就是说 在readyState改变时,会触发这个方法

方法体是 如果执行成功(xmlhttp.readyState==4 && xmlhttp.status==200)

以 xmlhttp的readyState和status属性作为请求执行成功的依据

从上述可以看出,从上传到响应,到执行状态标示,所有的动作都是xmlhttp放出的,所有的信息结果都储存在xmlhttp属性中

xmlhttp是XMLHttpRequest对象的简写

XMLHttpRequest 用于在后台与服务器交换数据,所有的浏览器都支持XMLHttpRequest对象

以上就是ajax的本质内容

不管是 jquery中的jquery.ajax()或者 jquery.post() jquery.get方法都是对这些本质内容的封装(猜测)

以上所有内容可以在w3c ajax部分找到对应内容

写一篇博客只为日后忘记时能快速的看一遍

也加深一下记忆,讲一下自己的见解

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值