feiyang10086 发表于 2012-01-13 15:10

ajax入门学习笔记

ajax入门学习笔记





本文之于记录ajax技术的原理,不用框架及js库来实现数据的异步请求交互:



ajax是Asynchronous JavaScript and XML(即异步JavaScript和XML)一种融合多种技术的一种技术。好别扭(⊙o⊙)…



ajax的技术核心是XMLHttpRequest对象,对于XMLHttpRequest最早是在IE5.0中以ActiveX组件的形式出现的,后来Mozilla,chrome,Safari,Opera等浏览器厂商都支持了XMLHttpRequest,以及IE7+(IE7及以上版本)都支持了XMLHttpRequest对象,但IE5、IE5.5(这两个应该没人用了)、IE6(国内还是有N多人的机器上还是在用这个吧?!)还是用ActiveX对象来创建XMLHttpRequest对象,所以为了我们代码的鲁棒性,通用性,我们还是得照顾IE6及以下版本的浏览器,所以创建XMLHttpRequest对象需要对不同浏览器以不同方式来创建:

<script type="text/javascript">

var xmlhttp;

function loadXMLDoc(url){

        xmlhttp=null;

        if (window.XMLHttpRequest){

                //针对IE7+,firefox,chrome,Safari,Opera等浏览器

                xmlhttp=new XMLHttpRequest();

        }else if (window.ActiveXObject){

                // 针对IE5 and IE6

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

        }

        if (xmlhttp!=null){

                xmlhttp.onreadystatechange=state_Change;//这里回调函数不能加括号,只写回调函数名

                xmlhttp.open("GET",url,true);//get方式发生http请求,第三个参数是表示异步提交

                xmlhttp.send(null);

        }else{

                alert("您的浏览器不支持XMLHTTP,请升级您的浏览器.");

        }

}



function state_Change(){

        if (xmlhttp.readyState==4){//readyState=4时表示服务器端的响应数据已经被全部接收

                if (xmlhttp.status==200){//status=200表示http连接状态正常

                            // ...our code here...

                        var responseText = xmlhttp.responseText;//服务器响应的数据 文本形式

                        alert(responseText);

                    }else{

                            alert("Problem retrieving XML data");

                    }

        }

}

</script>XMLHttpRequest对象操作五个步骤如下:

1、XMLHttpRequest对象的创建 (需要兼容多个浏览器,创建方式IE6和其他版本浏览器有区别)

2、设置回调函数,XMLHttpRequest对象创建成功后,需要告诉它请求服务器后回来调用哪个函数继续执行

3、建立服务器的调用,XMLHttpRequest对象的open方法,三个参数,第一个http请求方式,get或post,第二个参数,请求的url地址,第三个参数 true异步调用 false 同步调用

4、向服务器发生数据,XMLHttpRequest对象的send方法,这里才是真正的请求服务器

5、回调函数处理,在服务器端的响应数据全部接受(readyState==4)并且http连接状态正常(status==200),此可以从 XMLHttpRequest对象的responseText以文本形式接收响应的数据。





----------------------------------------------------------------------------------------------------------------------------------------------------------------

XMLHttpRequest对象的readyState状态值如下



0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)

1 (初始化) 对象已建立,尚未调用send方法

2 (发送数据) send方法已调用,但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误

4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据



----------------------------------------------------------------------------------------------------------------------------------------------------------------

常见http连接状态(XMLHttpRequest对象的status值)如下:



1、200 OK 访问正常  表示成功访问,为网站可正常访问时的状态。

2、301 Moved Permanently 301重定向永久重定向 对搜索引擎相对友好的跳转方式,当网站更换域名时可将原域名作301永久重定向到新域名,原域名权重可传递到新域名,也常有将不含www的域名301跳转到含www的,如xxx.com通过301跳转到www.xxx.com

3、302 Found 为临时重定向 易被搜索引擎判为作 弊,比如response.Redirect()跳转、js跳转或静态http跳转。

4、400 Bad Request 域名绑定错误 一般是服务器上域名未绑定成功,未备案等情况。

5、403 Forbidden 没有权限访问此站  你的IP被列入黑名单,连接的用户过多,可以过后再试,网站域名解析到了空间,但空间未绑定此域名等情况。

6、404 Not Found 文件或目录不存在  表示请求文件、目录不存在或删除,设置404错误页时需确保返回值为404。常有因为404错误页设置不当导致网页返回的不是404而导致搜索引擎降权。

7、500 Internal Server Error 程序或服务器错误 服务器内部程序错误,出现这样的提示一般是程序页面中出现错误,如语法错误,数据连接故障等。



详细的http连接状态 烦请参考我的另一片文章:http://ducaijun.iteye.com/admin/blogs/1334921

星期六的深夜68 发表于 2012-01-13 15:11

不错呀

jiyuwoaa 发表于 2012-04-02 13:07

来学习的~!!!!!!

catcce 发表于 2012-04-05 20:12

学习了。。。感谢分享。。。
页: [1]
查看完整版本: ajax入门学习笔记