Ajax提交底层原型XMLHttpRequest

相信接触过ajax的都觉得其post,get提交很方便,那么他是怎么实现的呢?基于此我们就不得不谈到js中的XMLHttpRequest对象.

其中w3c中是这样解释的:　

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想，因为您能够：

- 在不重新加载页面的情况下更新网页
- 在页面已加载后从服务器请求数据
- 在页面已加载后从服务器接收数据
- 在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

XMLHttpRequest 对象的方法主要有:

abort()方法

request.abort()

中断当前对象的HTTP@H_404_47@请求.

open方法

request.open(method,url,sync);

初始化HTTP@H_404_47@连接请求对象,@H_404_47@设置请求方法,@H_404_47@地址,@H_404_47@认证信息.method可以定义为"POST","GET"两种

@H_404_47@@H_404_47@@H_404_47@@H_404_47@send 方法

@H_404_47@@H_404_47@@H_404_47@@H_404_47@request.send("args");

向服务器发送一个HTTP@H_404_47@请求,@H_404_47@并获取返回结果.

@H_404_47@@H_404_47@@H_404_47@@H_404_47@setRequestHeader方法:

@H_404_47@@H_404_47@@H_404_47@@H_404_47@@H_404_47@@H_404_47@request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");

在请求header@H_404_47@中设置Header/Value@H_404_47@值对并发送到服务器端.

@H_404_47@@H_404_47@XMLHttpRequest 对象的属性主要有:

onreadystatechange

设置请求对象状态readystate@H_404_47@改变时要调用的函数对象;

readyState

请求对象的状态值,@H_404_47@含义如下:

0-@H_404_47@请求对象被创建,@H_404_47@但未初始化,@H_404_47@即open@H_404_47@方法未调用

1-@H_404_47@装载中,open@H_404_47@方法已调用,send@H_404_47@方法未调用

2-@H_404_47@已装载,send@H_404_47@方法已调用,@H_404_47@但还未获得Header@H_404_47@信息

3-@H_404_47@交互中,@H_404_47@已获取了部分信息,@H_404_47@这时调用responseText@H_404_47@将得到不完整信息,@H_404_47@会返回错误

4-@H_404_47@所有数据已接收完成,@H_404_47@可用responseText@H_404_47@或responseBody@H_404_47@得到完整数据

responseBody

表示从HTTP@H_404_47@响应得到的返回原始信息,@H_404_47@内容的编码方式决定于请求的服务器端(UTF-8,UCS-2,UCS-4,Shift_JIS@H_404_47@等)

responseText

HTTP@H_404_47@请求返回数据体的字符串表示，缺省情况下用utf-8@H_404_47@编码后返回，如果返回内容中有中文，服务器端的数据必须用utf-8@H_404_47@编码，否则就会出现乱码。

responseStream

HTTP@H_404_47@请求返回数据的流对象,@H_404_47@该对象实现IStream@H_404_47@接口.

responseXML

返回XML@H_404_47@格式的数据对象.@H_404_47@服务器端返回数据为XML@H_404_47@格式数据时可用.@H_404_47@服务器端用动态语言生成xml@H_404_47@时,@H_404_47@必须设置content-type@H_404_47@为text/xml@H_404_47@，否则客户端得到的responseXML@H_404_47@为空

status

HTTP@H_404_47@返回代码.

200-@H_404_47@成功

404-@H_404_47@错误请求

500-服务器内部错误,@H_404_47@等等.@H_404_47@详见HTTP@H_404_47@协议.

statusText

HTTP@H_404_47@返回状态文本描述.

@H_404_47@实例POST代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <Meta charset="utf-8" />
        <title>XMLHttpRequest测试</title>
        <script type="text/javascript">
        window.onload=function(){
            //监听a中的click事件
            document.getElementsByTagName("a")[0].onclick=function(){
                //创建XMLHttpRequest对象(注意大小写)
                //var request =window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
                //考虑兼容性
                //var request=init();
                var request=new XMLHttpRequest();
                　function init(){
                　　if (window.XMLHttpRequest) {
                　　　return new XMLHttpRequest();
                　　}
                　else if (window.ActiveXObject) {
                　　return new ActiveXObject("Microsoft.XMLHTTP");
                　}
                }
                //添加时间戳 起到禁用缓存的效果
                var url=this.href;
                //+"?time="+new Date();
                //请求方式为GET请求
                //var method='GET';
                //请求方式为POST请求
                var method="POST";
                //准备发送请求(就像汽车发动机点火一样)
                request.open(method,true);
                //如果是Post请求,需要在此处添加setheader,格式如下:
                request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
                //发送请求(汽车运行..)
                
                //request.accept="text/html";
                //request状态变化
                request.onreadystatechange=function(){
                    //判断响应是否完成
                    if (request.readyState==4) {
                        //判断响应是否可用
                        if(request.status==200){
                            //打印响应信息
                            console.info(request.responseText);
                        }
                    } 
                };
                var age=10;
                request.send("age="+age);
                //禁用a跳转
                return false;
            };
            
        };
    </script>
    </head>
    
    <body>
        <a href="hw.txt">点击我</a>
    </body>
        
    </html>

hw.txt内容

Hello Ajax!!!^_^

实际效果:

PS:get方式提交这里就不赘述了.单值得注意的是post提交的时候要在open之后send之前添加header属性值.另外还要注意的是post提交依赖服务器的支持,否则不能consol数据,报500,内部服务器错误.

原文链接：https://www.f2er.com/ajax/161090.html

Ajax提交底层原型XMLHttpRequest

猜你在找的Ajax相关文章