最近需要使用ajax,json传数据,快速学习了下ajax,把基本的东西拿出来分享一下,打算以问题的形式来进行文章的编写~go!
(一)什么是Ajax?
Ajax是一种无需加载整个网页,快速刷新局部网页的技术。Ajax不是新的编程语言,而是一些老技术的融合。
(二)Ajax用到了什么技术?
异步数据获取技术:使用XMLHttpRequest
基于标准的表示技术(即静态页):使用XHTML和CSS
动态显示和交互技术:使用Document Object Model(DOM)
数据互换和操作技术:使用XML与XSLT,现在流行的还有JSON
javascript:作为胶水语言将上述技术融合在一起
基本上也可以说,Ajax全是用javascript编写的~~
(三)什么是XMLHttpRequest?
XMLHttpRequest对象是Ajax的核心,现在的浏览器都支持这个对象,XMLHttpRequest对象用于在后台与服务器交换数据
(四)如何XMLHttpRequest对象?
对应于不同的浏览器,有不同的创建方法。
现在的浏览器,都可通过
[javascript] view plain copy print ?
<span style="font-size: 18px;"> var xmlhttp = new XMLHttpRequest();
var xmlhttp = new XMLHttpRequest();
来创建XMLHttpRequest对象~!
而对于IE5,IE6等老版本浏览器,则使用
[javascript] view plain copy print ?
<span style="font-size: 18px;"><span style="font-family: Arial; background-color: rgb(255, 255, 255);"> var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
来创建~
下面这串代码是一个通用的解决办法,可以满足根据不同浏览器调用不同的XMLHttpRequest对象
[javascript] view plain copy print ?
- <span style="font-size: 18px;"> 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");
- }
- 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"); }
(五)如何向服务器发送请求?
通过XMLHttpRequest对象的open()方法和send()方法,即可向服务器发送请求
open(method,url,async)方法,
_method_:请求的类型;GET 或 POST
_url_:文件在服务器上的位置
_async_:true(异步)或 false(同步)
send(string)方法
_string_:仅用于 POST 请求
先看看get请求~
[javascript] view plain copy print ?
<span style="font-size: 18px;"> xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
xmlhttp.open("GET","demo_get.asp",true); xmlhttp.send();
再看看POST请求~
[javascript] view plain copy print ?
<span style="font-size: 18px;"> xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send();
其实两者差不多对吧?POST是可以传递数据的,怎么传?
[javascript] view plain copy print ?
- <span style="font-size: 18px;"> xmlhttp.open("POST","ajax.jsp",true);
- xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
- xmlhttp.send("fname=steven&lname=Jobs");
- xmlhttp.open("POST","ajax.jsp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=steven&lname=Jobs");
异步传输async参数请填写true~
(六)POST和GET有什么不同?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
GET其实并不常用,因为GET属于明文传输,不安全~
(七)怎么接受服务器的响应?
只需要使用到XMLHttpRequest的两个属性,分别是responseText和responseXML
看名字就知道,他们分别对应的是 普通文本 和 XML文件~
代码如下,只需替换最后的responseText为responseXML即可接受并解析XML文件~
[javascript] view plain copy print ?
<span style="font-size: 18px;"> document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
(八)关于回调函数onreadystatechange是怎么回事“
当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
readyState的5种状态:
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
[javascript] view plain copy print ?
- xmlhttp.onreadystatechange=function()
- {
- if (xmlhttp.readyState==4 && xmlhttp.status==200)
- {
- document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
- }
- }
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
上面就是AJAX最基本的内容,了解这些,再看两个实例,就可以去学习AJAX的框架了~
AJAX的框架发展到现在实在太多了,这里建议使用jquery~