一、Ajax简介
asynchronous javascript and xml,为了解决传统的web应用当中“提交-等待-提交”模式而产生的一种
技术,其实质是通过javascript调用浏览器内置的一个特殊对象(XmlHttpRequest)向服务器异步发送请求,
服务器以xml或者文本的形式返回数据给XmlHttpRequest,然后,通过javascript从XmlHttpRequest中获取数据,
更新页面。在整个过程当中,页面无刷新。
2、Ajax编程步骤
step1:获得XMLHttpRequest对象,IE与其它浏览器不一样,其它浏览器都可以用new XMLHttpRequest()获得,而ie要使用ActiveXObject。
function getXmlHttpRequest(){
var xmlHttpRequest = null;
if ((typeof XMLHttpRequest) != 'undefined') {
xmlHttpRequest = new XMLHttpRequest();
}
else { // IE
xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
}
return xmlHttpRequest;
}
step2 :使用XMLHttpRequest发送请求->先open(连接)再send(发送)。
1)发送get请求
var url="some.do?name=zs";
xhr.open("get",url,true);
三个参数的含义:get:表示请求方式,可以大写。
url:请求的地址,后面可以添加参数(?参数名=值)。
true:表示异步请求。
xhr.send(null);//因为参数已经添加到url地址后面,所以指定null,注意不能不写
2)发送post请求(推荐使用)
var url="some.do";
xhr.open("post",url,true);
//发送之前设置消息头,固定写法
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求,post方式参数放在send()内
xhr.send("name=zs");
step3: 服务器处理请求,返回数据.
step4:使用回调函数来处理服务器返回的数据-onreadystatechange
var url="some.do";
xhr.open("get",url,true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//4表示从xhr中获取数据完毕,也就意味着此时可以处理数据了。
var text = xhr.reponseText;//返回的是文本
var xml = xhr.responseXML;//返回的是xml数据
//使用返回的数据更新页面
document.getElementById('a1').innerHTML=text;
}
};
xhr.send(null);
//get方式,参数要加在url后面
//post方式,参数要加在send()里
3、XmlHttpRequest对象的的关键属性介绍:
(1)readyState属性介绍
含义:通过该属性获取XmlHttpRequest与服务器通讯的状态。
0(创建完毕):XmlHttpRequest对象已经创建好,但没有调用open方法。
1(初始化):XmlHttpRequest没有调用send()方法。
2(发送):XmlHttpRequest开始发送数据给服务器。
3(获取数据):XmlHttpRequest正获取服务器返回的数据.
4(获取数据完毕):此时,可以通过XmlHttpRequest获得服务器返回的所有数据。
(2)reponseText属性:服务器返回的文本。
(3)responseXML属性:服务器返回的xml数据。
(4)onreadystatechange属性:用来设置回调函数,即根据通讯状态码处理服务器返回的数据。
xhr.onreadystatechange=function(){
//当xhr与server通讯状态为4,既从xhr中获取数据完毕。
if(xhr.readyState==4){
开始接收数据-->处理数据(既通过js的DOM操作更新页面)
}
}
(5)status属性:通过来判断xhr与服务器是否通讯正常。
返回服务器的状态码(200,500,404)。
分享到:
相关推荐
ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习...
ajax学习笔记。。。。。。。。。。。。。。。。。。。。。。
AJAX学习笔记。内含Java调用的两个实例,及JavaScript的ajax工具函数,可快速入门,也可当手册使用。个人精心整理,值得收藏。 更多:http://download.csdn.net/user/daillo/all
Ajax 学习笔记,超详细的噢!不看后悔,自己上培训班时记的笔记
Ajax学习笔记
夏玉保整理Ajax学习笔记.doc 夏玉保整理Ajax学习笔记.doc夏玉保整理Ajax学习笔记.doc 夏玉保整理Ajax学习笔记.doc
Ajax学习笔记.zip
Myeclipse的源代码示例(ajax学习笔记代码),四天学会ajax doc文档。
jQuery+AJAX学习笔记
web前端开发AJAX学习笔记
16ajax学习笔记1
ZK-AJAX学习笔记
Web2.0之Ajax 学习笔记与应用实例,Web2.0之Ajax 学习笔记与应用实例
Ajax 学习笔记(1).rtf
非常经典的ajax学习笔记,想学好ajax的程序员都应该学习一下
AJAX学习笔记忘记了看一眼
Ajax 学习笔记 留在备用 培训资料 培训总结
根据个人学习Ajax的过程总结,整理了Ajax相关基础知识点,对Ajax的使用有较详细的介绍,通过个别举例,可以快速了解Ajax的功能,比较适合初学者入门。