Ajax----API

最新推荐文章于 2024-07-14 12:56:18 发布

iteye_8039

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量76

点赞数

分类专栏： Ajax 文章标签： javascript xhtml ViewUI

本文链接：https://blog.csdn.net/iteye_8039/article/details/82582384

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

var xmlhttp ;
function CreateXMLHttp(){
        try{
            xmlhttp = new XMLHttpRequest(); //创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持此方法。
        }
        catch (e){
            try{
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");//新版本IE 创建 IE 兼容对象(Msxml2.XMLHTTP)
            }
            catch (e){
                try{
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //老版本IE创建IE兼容对象(Microsoft.XMLHTTP)
                }
                catch (failed){
                      xmlhttp = false; //如果失败则保证 request 的值仍然为 false。
                }
            }
        }
        return xmlhttp;
}

Ajax请求函数：

function sendRequest(){
var url = "http://127.0.0.1:8080/ch19_1/ajaxServlet?action=send";
CreateXMLHttp();                                                    //创建Ajax对象函数的调用
if(xmlhttp){
     xmlhttp.open("GET",url, true);
     xmlhttp.onreadystatechange = getResult;            //返回结果处理函数的调用
     xmlhttp.send(null);
}
}

XMLHttpRequest 对象的三个重要的属性：

onreadystatechange 属性---存有处理服务器响应的函数
readyState 属性---存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
responseText 属性---通过 responseText 属性来取回由服务器返回的数据

这里要注意xmlhttp.readyState 的状态值，不同的值代表不同的状态：

0      Uninitialized   初始化状态。XMLHttpRequest 对象已创建(未调用open()之前)或已被 abort() 方法重置
1      Open           open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2      Send            Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3      Receiving      所有响应头部都已经接收到。响应体开始接收但未完成。
4      Loaded         HTTP 响应已经完全接收。

例子1：

客户端脚本：

    xmlHttp.onreadystatechange=function(){
      if(xmlHttp.readyState==4){
        document.myForm.time.value=xmlHttp.responseText;
      }
    }

    xmlHttp.open("GET","time.jsp",true);
    xmlHttp.send(null);

</script>

<form name="myForm">
    用户: <input type="text" name="username" οnkeyup="ajaxFunction();" />
    时间: <input type="text" name="time" />
</form>

</body>
</html>
服务器端脚本：time.jsp

<%
response.expires=-1
response.write(time)
%>

Expires 属性可设置在页面缓存失效前页面被缓存的时间（分钟）。Response.Expires=-1 指示页面不会被缓存。

例子2：

Get请求和Post请求的区别：

1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来

2.使用Get请求发送数据量小,Post请求发送数据量大

3.get请求需注意缓存问题,post请求不需担心这个问题

4.post请求必须设置Content-Type值为application/x-form-www-urlencoded

5.发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function btn_get_click() {

        var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        var username = document.getElementById("txt_username").value;
        var age = document.getElementById("txt_age").value;

        //添加参数,以求每次访问不同的url,以避免缓存问题
        xmlHttp.open("get", "Server.aspx?username=" + encodeURIComponent(username)
                      + "&age=" + encodeURIComponent(age) + "&random=" + Math.random());
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
               document.getElementById("result").innerHTML = xmlHttp.responseText;
            }
        }

        //发送请求,参数为null
        xmlHttp.send(null);
    }

   function btn_post_click() {
       var xmlHttp = window.XMLHttpRequest ?new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
       var username = document.getElementById("txt_username").value;
       var age = document.getElementById("txt_age").value;

       var data = "username=" + encodeURIComponent(username)+ "&age=" + encodeURIComponent(age);

//不用担心缓存问题
xmlHttp.open("post", "Server.aspx", true);

       //必须设置,否则服务器端收不到参数
       xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       xmlHttp.onreadystatechange = function () {
           if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
              document.getElementById("result").innerHTML = xmlHttp.responseText;
           }
       }

        //发送请求,要data数据
       xmlHttp.send(data);
    }
</script >
</head>
<body>
    <label for="txt_username">
        姓名:</label>
    <input type="text" id="txt_username" />
    <br />
    <label for="txt_age">
        年龄:</label>
    <input type="text" id="txt_age" />
    <br />
    <input type="button" value="GET" id="btn_get" οnclick="btn_get_click();" />
    <input type="button" value="POST" id="btn_post" οnclick="btn_post_click();" />
    <div id="result">
    </div>
</body>
</html>

iteye_8039

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax----API

var xmlhttp ;function CreateXMLHttp(){ try{ xmlhttp = new XMLHttpRequest(); //创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持此方法。 } catch (e){ try{ xmlhttp ...
复制链接

扫一扫