ajax----------2、使用ajax发送异步的GET请求

最新推荐文章于 2023-06-22 15:36:11 发布

george_zyf

最新推荐文章于 2023-06-22 15:36:11 发布

阅读量685

点赞数 2

分类专栏： ajax 文章标签： ajax 异步

本文链接：https://blog.csdn.net/android_zyf/article/details/74857072

版权

ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一,得到XMLHTTPRequest对象

Ajax只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了Ajax!
Ajax是JS技术,所以也就是多掌握一个JS的对象而已.
得到XMlHttpRequest的流程
- 大多数浏览器都支持的: var xmlHttp = new XMLHttpRequest();
- IE6.0: var xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
- IE5.5及更早版本的IE: var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
编写创建XMLHttpRequest对象的函数

function createXMLHttpRequest() {
  try {
    return new XMLHttpRequest();
  } catch (e) {
    try {
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try{
        return new ActiveXObject("Microsoft.XMLHTTP");
      }catch(e){
        alert("这仨不行,就尴尬了小伙伴");
        throw e;
      }
    }
  }
}

二,打开与服务器的连接

xmlHttp.open():用来打开与服务器的连接,需要三个参数
- 请求方式:可以是GET或POST
- 请求的URL:指定服务器的资源,eg:/HelloAjax/index.jsp
- 请求是否为异步:如果为true表示发送异步请求,否则为同步请求.
xmlHttp.open(“GET”,”/HelloAjax/index.jsp”,true);

三,若是POST请求

如果发送请求时需要带有参数,一般都用POST请求.
设置Content-Type请求头:
- xmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

四,发送请求

xmlHttp.send(null):null必须传入,如果不传,可能会造成部分浏览器无法发送!
- 参数:
- 就是请求体内容,如果是get请求,必须给出null.
- 如果是post请求,()中传入的就是请求体:xmlHttp.send(“username=zhangSan&password=123”);

五,获取响应的内容

在xmlHttp对象的一个事件上,注册监听器:onreadystatechange(当状态发生改变事件)
xmlHttp对象一同有五个状态:
- 0状态:刚创建完,还没有调用open()方法.
- 1状态:请求开始,调用了open()方法,但还没有调用send()方法.
- 2状态:请求发送完成,也就是调用了send()方法了.
- 3状态:服务器已经开始响应,但是不表示已经响应结束,也不保证数据发送给了客户端.
- 4状态:服务器响应结束.(基本上我们只关心这个状态4)
得到xmlHttp对象的状态:
- var state = xmlHttp.readyState;获取这个属性值,得到的可能是0,1,2,3,4
得到服务器的响应的状态码:
- var status = xmlHttp.status;//200,404,500,302等
得到服务器响应的内容:
- var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
- var content = xmlHttp.responseXml;//得到服务器的响应的xml响应的内容,这是一个Document对象!!

xmlHttp.onreadystatechange = function functionName() {
  //xmlHttp的五种状态,都会调用本方法
  //双重判断:判断是否为null:判断状态是否为4状态,嗨哟奥判断是否大于300
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
    //响应的字符串
    var text = xmlHttp.responseText;
  }
}

state与readyState的区别

state值的含义

0：请求未初始化（还没有调用 open()）。

1：请求已经建立，但是还没有发送（还没有调用 send()）。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）

3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。

4：响应已完成；您可以获取并使用服务器的响应了。

readyState值的含义

等于1：说明请求已经准备好可以发送

等于2：服务器正在处理请求时会作出响应，响应首部提供了有关响应的信息，并提供一个状态码。

等于3：数据下载到请求对象，但是响应数据还没有完全准备好，还不能使用

等于4：服务器处理完请求，数据可以使用了

六,响应内容为xml数据的情况

服务器端:
- 设置响应头:Content-Type,其值为:text/xml;charset=utf-8;
客户端:
- var document = xmlHttp.responseXml;//得到的是一个Document对象


    <html>
        <head>
            <title>ajax示例</title>
            <script type="text/javascript">

                function createXMLHttpRequest() {
                    try {
                        //适合大多数浏览器
                        return new XMLHttpRequest();
                    } catch (e) {
                        try {
                            //适合ie6.0
                            return new ActiveXObject("Msxml2.HTTP");
                        } catch (e) {
                            try {
                                //适合ie5.5
                                return new ActiveXObject("Microsoft.HTTP");
                            } catch (e) {
                                alert("那你很棒棒呦");
                            }
                        }
                    }
                }


                window.onload = function () {
                    //当浏览器加载完当前页面时执行这个函数

                    var btn = document.getElementById("btn");

                    btn.onclick = function () {
                        //当btn被点击时,会调用这个函数
                        //1,获得XMLHttpRequest对象
                        var xmlHttp = createXMLHttpRequest();

                        //2,打开与服务器的连接
                        //参1:是GET请求还是POST请求
                        //参2:要访问的服务器资源的路径
                        //参3:是否为异步请求,true表示异步请求
                        xmlHttp.open("GET","/bs",true);

                        //3,发送请求体
                        //GET请求:无请求体,传null
                        //POST请求:传请求体.
                        xmlHttp.send(null);

                        //4,给XMLHttpRequest对象的onreadystatechange
                        //事件注册一个监听器
                        xmlHttp.onreadystatechange = function () {
                            if(xmlHttp.readyState == 4
                                && xmlHttp.status == 200){
                                //如果服务器响应结束
                                //并且响应码为200
                                //则说明响应成功,数据已经传递过来了

                                //访问BServlet,BServlet响应的数据为xml格式的
                                //所以这里接收的时候,也是接收responseXML
                                //responseXML这个属性,浏览器会帮我们改变格式
                                var doc = xmlHttp.responseXML;

                                //通过doc对象的getElementsByTagName方法
                                //可以获得从服务器传过来的xml数据中
                                //所有的clazz标签组成的数组
                                //因为我们只写了一个clazz标签,所以[0]表示第一个标签
                                var clazz =
                                    doc.getElementsByTagName("clazz")[0];

                                //获得clazz中的所有的student标签(数组),取角标为0的
                                var student =
                                    clazz.getElementsByTagName("student")[0];

                                //获取student标签中的id属性
                                var studentId = student.getAttribute("id");

                                //获取student标签中的name标签的标签体
                                //<name>这里的内容</name>
                                var nameStr =
                                    student.getElementsByTagName("name")[0]
                                        .textContent;


                                var show = document.getElementById("show");

                                show.innerHTML = "姓名:"+nameStr+"--id:"+studentId;
                            }
                        };
                    }

                };


            </script>
        </head>
        <body>
            <button id="btn" >点我</button>
            <h1 id="show"></h1>
            <input type="text">
            <br/>
            <input type="text">
        </body>
    </html>

george_zyf

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax----------2、使用ajax发送异步的GET请求

一,得到XMLHTTPRequest对象Ajax只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了Ajax!Ajax是JS技术,所以也就是多掌握一个JS的对象而已.得到XMlHttpRequest的流程大多数浏览器都支持的: var xmlHttp = new XMLHttpRequest();IE6.0: var xmlHttp = new ActiveXObje
复制链接

扫一扫