博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
XMLHttpRequest 及其open()的用法
阅读量:6094 次
发布时间:2019-06-20

本文共 3271 字,大约阅读时间需要 10 分钟。

hot3.png

XMLHttpRequest 对象用于在后台与服务器交换数据,它能够

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

 

XMLHttpRequest.open()语法

open(method, url, async, username, password)

各参数的解析:

method 参数是用于请求的 HTTP 方法。

值包括 GET、POST 和 HEAD。

( 不区分大小写。POST:用"POST"方式发送数据,可以大到4MB;GET:用"GET"方式发送数据,只能256KB;如果请求带有参数的化实用POST方式,POST方式将参数放置在页面的隐藏控件内;没有参数使用GET方式;对于请求的页面在中途可能发生更改的,也最好用POST方式)

url 参数是请求的主体。大多数浏览器实施了一个同源安全策略,并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。

 

async 参数指示请求使用应该异步地执行。如果这个参数是 false,请求是同步的,后续对 send() 的调用将阻塞,直到响应完全接收。

如果这个参数是 true 或省略,请求是异步的,且通常需要一个 onreadystatechange 事件句柄。

username 和 password 参数是可选的,为 url 所需的授权提供认证资格。如果指定了,它们会覆盖 url 自己指定的任何资格。

 

说明

1.这个方法初始化请求参数以供 方法稍后使用。它把 readyState 设置为1,删除之前指定的所有请求头部,以及之前接收的所有响应头部,并且把 responseText、responseXML、status 以及statusText 参数设置为它们的默认值。

2.当 readyState 为 0 的时候(当 XMLHttpRequest 对象刚创建或者abort() 方法调用后)以及当 readyState 为 4时(已经接收响应时),调用这个方法是安全的。

3.当针对任何其他状态调用的时候,open() 方法的行为是为指定的。

4.除了保存供 send() 方法使用的请求参数,以及重置 XMLHttpRequest 对象以便复用,open() 方法没有其他的行为。

5.要特别注意,当这个方法调用的时候,实现通常不会打开一个到 Web 服务器的网络连接。

 

举例

1 同步方式

var xmlhttp=newXMLHttpRequestObj ();

xmlhttp.open('get','xxx.asp?name=mumu',false);

xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');

xmlhttp.send();

 

2 异步方式

var sendStr='?m=1&n=2'; //url 的参数

var xmlhttp=newXMLHttpRequestObj ();

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4){    
        if(xmlhttp.status==200){

                //操作其他

        }
    }
}
xmlhttp.open('get','xxx.asp',true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(sendStr);

实例:

$(function({   $('#a').onclick = function () {       getDetails(this.id);   }))//获取XMLHttpRequest对象function creatRequest() {    try {        request = new XMLHttpRequest();    }    catch (tryMS) {        try {            request = new ActiveXObject("Msxml2.XMLHTTP");        }        catch (otherMS) {             try {                 request = new ActiveXObject("Miscrosoft.XMLHTTP");             }             catch (failed) {                 request = null;             }        }    }    return request;}//发送ajax请求function getDetails(itemName) {    request = creatRequest();    if (request == null) {        alert('没有成功创建请求')        return;    }    var url = "getDetails.php?LiName="+escape(itemName);    request.open("GET",url,true);    request.onreadystatechange = displayDetails;    request.send(null);}//根据返回结果执行响应事件function displayDetails() {    if (request.readyState == 4) {         if (request.status == 200) {            detailDiv = document.getElementById("inf");            detailDiv.innerHTML = request.responseText;        }    }}

JQ ajax:

//注意:如果是中文参数值,需要采用escape函数处理下,或者使用encodeURI包括两次进行传递                      $('#list li').click ( function () {                             $.ajax({                                       type:'GET',                                        data:'',                                       url:"getDetails.php?LiName="+escape(this.id),             success:function(data){                                                $('#inf').html(data);                                            },            dataType:'text',            error:function (){                                alert("失败!");                        }      })                    });

 

转载于:https://my.oschina.net/u/2331760/blog/1538333

你可能感兴趣的文章
我的友情链接
查看>>
Erlang教程
查看>>
linux服务器安装weblogic实战
查看>>
PostgreSQL从继承到分区(二)
查看>>
Windows7下彻底卸载MySQL5.5.21
查看>>
MySQL主从失败, 错误Got fatal error 1236解决方法
查看>>
我的友情链接
查看>>
操作系统内核
查看>>
AU14笔记-2
查看>>
Python urllib的urlretrieve()函数解析
查看>>
(FortiGate)飞塔防火墙BYOD网络安全解决方案
查看>>
Mysql 常用函数的 总结 (转)
查看>>
[李景山php]每天TP5-20170116|thinkphp5-Url.php-1
查看>>
jdk与jre的区别
查看>>
弹出菜单
查看>>
高德地图多marker聚合API
查看>>
IPv4 向 IPv6 过渡安全问题不可小觑
查看>>
Linux运维实战之Apache服务器的高级配置(虚拟主机、status)
查看>>
DHCP overview
查看>>
我的友情链接
查看>>