AJAX在线基础(待续) -

why7282

浏览: 28940 次
性别:
来自: 北京

最近访客更多访客>>

zhpower

Mr.shen

lsj626472785

terryang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

AJAX在线基础(待续)

Ajax 浏览器 IE XML Microsoft

1、 XMLHttpRequest:纵所周知，ajax的异步交互主要是通过xmlhttprequest对象来实现的，最初的时候只有IE才支持它，不错技术发展到今天，大部门浏览器都对它进行的支持，也给程序和客户的体验带来了多方面的改善。当然不同浏览器创建XMLHttpRequest对象是有些不同的。
2、 XMLHttpRequest不是W3C的标准，IE是通过ActiveX实例化它，其它大部门浏览器是通过实例化本地的一个JS对象来创建它，从而在创建XMLHttpRequest的时候，需要根据浏览器的不同，生成相应的对象
3、创建XMLHttpRequest对象，创建的时候不要因为不同浏览器的支持是不一样而感到困惑，其实主要是判断看当前浏览器是否对ActiveX对象的支持，如果是就代表是IE浏览器，如果不是就是其它浏览器，相应的用JS进行创建，代码如下：
//创建一个专门生成XMLHttpRequest对象的JS函数
Function createXMLHttpRequest() {
   Var xmlhttp;
   If(window.ActiveXObject) {//如果支持ActiveX说明是IE浏览器
   Xmlhttp = new ActiveXObject(“Microsoft XMLHTTP”);
} else if(window.XMLHttpRequest) {
   Xmlhttp = new XMLHttpRequest(); //其实浏览器的话，通过JS创建
}
//都不是的话就为空了
Return xmlhttp;
}
4、 XMLHttpRequest常见方法
Abort():停止请求，大家都知道XMLHTTPREQUEST对象可以发送请亲，调用它可以终止当前发送的请求。
getAllResponseHeaders():把相应的HTTP相应信息，作为键值对返回，我们知道，HTTP协议的头部都是对应变量有对应的信息的
open(“method”,”url”);准备对服务器进行调用;method是调用的方式，有post、get等方式，url是请求的路径，该方法还有一些可选的参数可以执行设置
send(content):发送请求，content为发送的内容
setRequestHeader(“key”,”value”):设置请求的信息
5、方法解析
Open:open方法有两个固定参数method,url是必须的，还有一个boolean参数，代表是异步还是同步发送请求，一般默认是true:代表异步，因为大部门的时候基本上使用XMLHttpRequest都是用来进行异步的请求调用，还有username,password两个参数，对请求设定一个账号和密码
getResponseHeader(“header”):获取响应信息的特步名称的内容
通过XMLHttpRequest的一些方法，可以很灵活的发送各种请求，对请求发送回来的相应头信息也能方便的进行查看
6、 XMLHttpRequest对象的属性
Onreadystatechange:在发送请求的时候，HTTP的请求状态会发生变化，每个变化都会调用一个回调函数，而这个属性就是专门制定使用哪个函数为回调函数，回调函数大部门时间是用来处理返回来的结果和数据
Readystate:就是请求的状态变化，有五种状态，它的值分别是0,1,2,3,4,也就是说属性onreadstatechange注册的回调函数在正常返回的情况下，应该是被调用五次了。
ResponseText:把服务器的响应信息作为一个字符串进行处理
ResponseXML:把服务器的响应信息作为XML处理，可以被解析为一个DOM对象
Status:HTTP的状态，200代表找到了请求的页面，404代表没有找到
statusText:HTTP响应状态的文本，如200对应OK，404就是not found等
7、 JAVASCRIPT的编码和解码函数，是JS的全局存在的函数
escape(string):对STRING进行编码
Unescape(string):对string进行解码
这样在请求中也可以很好的避免中文乱码等问题
8、在响应的请求中，应当设置如下属性
response.setContentType("text/html");//XMLHttpRequest只对text/xml类型响应处理
response.setHeader(“cache-control”,”no-cache”);
response.setHeader(“Pragma”,”no-cache”) //设置不缓存
9、 XMLHttpRequest的GET和POST
在实际当中，大部门都是发送GET请求，因为一部的调用都一般不会有很多的请求内容，在一定要使用Post的时候，和GET的请求是有区别的POST需要设置头部以下信息
Xmlhttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencode”);因为post下如果上传文件，那就不能向get方式那样的请求信息。用Post方法发送请求同时需要制定
Xml.send(content)的内容，而get的方式一般Url直接包含了内容了，get方法把请求参数都放在url中，post方式都是把请求参数放入在send(content)当中发送。
10、一个XMLHttpRequest的例子，就来请求以下大家经常使用到的web.xml文件吧
拷贝一份web.xml到webroot下面
建立index2.jsp如下:在tomcat下部门即可
<%@ page language="java" pageEncoding="utf-8"%>
<html>
<head>
<script type="text/javascript">
         function getWEBXML() {
            var xmlhttp = createXML();
            xmlhttp.onreadystatechange = function(){
            if (xmlhttp.readyState == 4) {//readystate 为4即数据传输结束
    if(xmlhttp.status == 200){
alert(xmlhttp.responseText);
}
   }
            }
            xmlhttp.open("GET", "web.xml", true);
            xmlhttp.send(null);
         }

        function createXML() {
            var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
        return xmlhttp;
         }
     </script>
</head>
<body>
<input type="button" id="id" onclick="getWEBXML()" />
</body>
</html>

分享到：