Ajax中XMLHttpRequest对象说明和使用

最新推荐文章于 2022-11-16 14:11:43 发布

ydjjn_wxs

最新推荐文章于 2022-11-16 14:11:43 发布

阅读量439

点赞数

文章标签： ajax javascript xmlhttprequest

本文链接：https://blog.csdn.net/ydjjn_wxs/article/details/58140888

版权

Ajax技术可以完成局部的页面刷新，实现浏览器和服务器之间异步的数据传输。JavaScript中的XMLHttpRequest对象是Ajax技术的核心对象，它提供了异步发送请求的能力。

1.XMLHttpRequest对象获取的例子：

function getXMLHttpRequest(){
    var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlhttp;
}

XMLHttpRequest对象会根据浏览器的不同，有着不同的获取方式。

XMLHttpRequest对象的属性，方法介绍：
1>.属性
1)readyState :
0 :请求未初始化（在调用 open() 之前）
1 :请求已提出（调用 send() 之前）
2 :请求已发送（这里通常可以从响应得到内容头部）
3 :请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4 :请求已完成（可以访问服务器响应并使用它）

2) responseText：取回由服务器返回的数据
3) responseXML：取回由服务器返回的数据
4) status：返回服务器状态码如404，200等。

2>.方法
1) open(method,url, asynch):与服务器建立连接
其中method表示HTTP调用方法，一般使用”GET”，”POST”
url表示调用的服务器的地址
asynch表示是否采用异步方式，true表示异步，一般这个参数不写

范例代码
xmlHttp.open(“POST”, “url”);
xmlHttp.open(“GET”, “url?name=xxx&pwd=xxx”);

2) send(content) :发送请求
GET方式提交
数据在URL：xmlHttp.send(null);
POST方式提交：
xmlHttp.setRequestHeader(“CONTENT-TYPE”,”application/x-www-form-urlencoded”);

xmlHttp.send(“name=xxx&pwd=xxx”);

setRequestHeader()：设置请求头信息

3.事件处理器
onreadystatechange：处理服务器响应的函数;

例子：一个简单的用户名检查：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">

function getXMLHttpRequest(){
    var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlhttp;
}

 function checkName(){
    //得到用户名 
       var name=document.getElementsByTagName("input")[0];
       //创建XMLHttpRequest
       var xhr=getXMLHttpRequest();
     //处理结果
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4){//请求一切正常
                if(xhr.status==200){//服务器响应一切正常
                    var msg = document.getElementById("msg");
                    //alert(xhr.responseText);
                    if(xhr.responseText=="true"){
                        msg.innerHTML =  "<font color='red'>用户名已存在</font>";
                    }else{
                        msg.innerHTML = "可以使用";
                    }
                }
            }
        }

       //创建连接
       xhr.open("get","${pageContext.request.contextPath}/checkUsername?name="+name.value);
       //发送请求
       xhr.send(null);
 }

 </script>
<title>Insert title here</title>
</head>
<body>
    用户名:<input type="text" name="userName" onblur="checkName()"><span  id="msg"></span></br>
   密码: <input type="password" name="psw"></br>
</body>
</html>