精华内容
下载资源
问答
  • Ajax请求五个步骤

    万次阅读 多人点赞 2020-06-02 14:01:22
    Ajax请求五个步骤 一、定义 1、什么是Ajax Ajax:即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新...

    目录

    Ajax请求的五个步骤

    一、定义

    1、什么是Ajax

    2、同步与异步的区别

    3、ajax的工作原理

    二、实现AJAX的基本步骤

    1、创建XMLHttpRequest对象

    2、创建HTTP请求

    3、设置响应HTTP请求状态变化的函数

    4、设置获取服务器返回数据的语句

    5、发送HTTP请求

    6、局部更新

    三、完整的AJAX实例


    Ajax请求的五个步骤

    一、定义

    1、什么是Ajax

    Ajax:即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容,必需重载整个网页面。

    2、同步与异步的区别

    同步提交:当用户发送请求时,当前页面不可以使用,服务器响应页面到客户端,响应完成,用户才可以使用页面。

    异步提交:当用户发送请求时,当前页面还可以继续使用,当异步请求的数据响应给页面,页面把数据显示出来 。

    3、ajax的工作原理

    客户端发送请求,请求交给xhr,xhr把请求提交给服务,服务器进行业务处理,服务器响应数据交给xhr对象,xhr对象接收数据,由javascript把数据写到页面上,如下图所示:

    ajax请求的五个步骤

    二、实现AJAX的基本步骤

    要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

    1. 创建XMLHttpRequest对象,即创建一个异步调用对象.
    2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
    3. 设置响应HTTP请求状态变化的函数.
    4. 发送HTTP请求.
    5. 获取异步调用返回的数据.
    6. 使用JavaScript和DOM实现局部刷新.

    1、创建XMLHttpRequest对象

          不同浏览器使用的异步调用对象有所不同,在IE浏览器中异步调用使用的是XMLHTTP组件中的XMLHttpRequest对象,而在Netscape、Firefox浏览器中则直接使用XMLHttpRequest组件。因此,在不同浏览器中创建XMLHttpRequest对象的方式都有所不同.

        在IE浏览器中创建XMLHttpRequest对象的方式为:

    var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

        在Netscape浏览器中创建XMLHttpRequest对象的方式为:

    var xmlHttpRequest = new XMLHttpRequest();

        由于无法确定用户使用的是什么浏览器,所以在创建XMLHttpRequest对象时,最好将以上两种方法都加上.如以下代码所示:

    var xmlHttpRequest;  //定义一个变量,用于存放XMLHttpRequest对象
    createXMLHttpRequst();   //调用创建对象的方法
    //创建XMLHttpRequest对象的方法 
    function createXMLHttpRequest(){                                                 
        if(window.ActiveXObject) {//判断是否是IE浏览器
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");//创建IE的XMLHttpRequest对象
        }else if(window.XMLHttpRequest){//判断是否是Netscape等其他支持XMLHttpRequest组件的浏览器
            xmlHttpRequest = new XMLHttpRequest();//创建其他浏览器上的XMLHttpRequest对象
        }
    }

           "if(window.ActiveXObject)"用来判断是否使用IE浏览器.其中ActiveXOject并不是Windows对象的标准属性,而是IE浏览器中专有的属性,可以用于判断浏览器是否支持ActiveX控件.通常只有IE浏览器或以IE浏览器为核心的浏览器才能支持Active控件.

          "else if(window.XMLHttpRequest)"是为了防止一些浏览器既不支持ActiveX控件,也不支持XMLHttpRequest组件而进行的判断.其中XMLHttpRequest也不是window对象的标准属性,但可以用来判断浏览器是否支持XMLHttpRequest组件.

          如果浏览器既不支持ActiveX控件,也不支持XMLHttpRequest组件,那么就不会对xmlHttpRequest变量赋值.

    2、创建HTTP请求

           创建了XMLHttpRequest对象之后,必须为XMLHttpRequest对象创建HTTP请求,用于说明XMLHttpRequest对象要从哪里获取数据。通常可以是网站中的数据,也可以是本地中其他文件中的数据。

           创建HTTP请求可以使用XMLHttpRequest对象的open()方法,其语法代码如下所示:

    XMLHttpRequest.open(method,URL,flag,name,password);

    代码中的参数解释如下所示:

    • method:该参数用于指定HTTP的请求方法,一共有get、post、head、put、delete五种方法,常用的方法为get和post。

    • URL:该参数用于指定HTTP请求的URL地址,可以是绝对URL,也可以是相对URL。

    • flag:该参数为可选,参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步、false表示同步,默认为true。

    • name:该参数为可选参数,用于输入用户名。如果服务器需要验证,则必须使用该参数。

    • password:该参数为可选,用于输入密码。若服务器需要验证,则必须使用该参数。

    通常可以使用以下代码来访问一个网站文件的内容。      

    xmlHttpRequest.open("get","http://www.aspxfans.com/BookSupport/JavaScript/ajax.htm",true);

    或者使用以下代码来访问一个本地文件内容:

    xmlHttpRequest.open("get","ajax.htm",true);

    注意:如果HTML文件放在Web服务器上,在Netscape浏览器中的JavaScript安全机制不允许与本机之外的主机进行通信。也就是说,使用open()方法只能打开与HTML文件在同一个服务器上的文件。而在IE浏览器中则无此限制(虽然可以打开其他服务器上的文件,但也会有警告提示)。

    3、设置响应HTTP请求状态变化的函数

           创建完HTTP请求之后,应该就可以将HTTP请求发送给Web服务器了。然而,发送HTTP请求的目的是为了接收从服务器中返回的数据。从创建XMLHttpRequest对象开始,到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5中状态。

    1. 未初始化状态。在创建完XMLHttpRequest对象时,该对象处于未初始化状态,此时XMLHttpRequest对象的readyState属性值为0。
    2. 初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时,该对象处于初始化状态。此时XMLHttpRequest对象的readyState属性值为1。
    3. 发送数据状态。在初始化XMLHttpRequest对象后,使用send()方法发送数据时,该对象处于发送数据状态,此时XMLHttpRequest对象的readyState属性值为2。
    4. 接收数据状态。Web服务器接收完数据并进行处理完毕之后,向客户端传送返回的结果。此时,XMLHttpRequest对象处于接收数据状态,XMLHttpRequest对象的readyState属性值为3。
    5. 完成状态。XMLHttpRequest对象接收数据完毕后,进入完成状态,此时XMLHttpRequest对象的readyState属性值为4。此时接收完毕后的数据存入在客户端计算机的内存中,可以使用responseText属性或responseXml属性来获取数据。

            只有在XMLHttpRequest对象完成了以上5个步骤之后,才可以获取从服务器端返回的数据。因此,如果要获得从服务器端返回的数据,就必须要先判断XMLHttpRequest对象的状态。

           XMLHttpRequest对象可以响应readystatechange事件,该事件在XMLHttpRequest对象状态改变时(也就是readyState属性值改变时)激发。因此,可以通过该事件调用一个函数,并在该函数中判断XMLHttpRequest对象的readyState属性值。如果readyState属性值为4则使用responseText属性或responseXml属性来获取数据。具体代码如下所示:

    //设置当XMLHttpRequest对象状态改变时调用的函数,注意函数名后面不要添加小括号
    xmlHttpRequest.onreadystatechange = getData;
    
    //定义函数
    function getData(){
        //判断XMLHttpRequest对象的readyState属性值是否为4,如果为4表示异步调用完成
        if(xmlHttpRequest.readyState == 4) {
            //设置获取数据的语句
        }
    }

    4、设置获取服务器返回数据的语句

           如果XMLHttpRequest对象的readyState属性值等于4,表示异步调用过程完毕,就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。

           但是,异步调用过程完毕,并不代表异步调用成功了,如果要判断异步调用是否成功,还要判断XMLHttpRequest对象的status属性值,只有该属性值为200,才表示异步调用成功,因此,要获取服务器返回数据的语句,还必须要先判断XMLHttpRequest对象的status属性值是否等于200,如以下代码所示:

     if(xmlHttpRequst.status == 200) {
        document.write(xmlHttpRequest.responseText);//将返回结果以字符串形式输出
        //document.write(xmlHttpRequest.responseXML);//或者将返回结果以XML形式输出
     }

    注意:如果HTML文件不是在Web服务器上运行,而是在本地运行,则xmlHttpRequest.status的返回值为0。因此,如果该文件在本地运行,则应该加上xmlHttpRequest.status == 0的判断。

            通常将以上代码放在响应HTTP请求状态变化的函数体内,如以下代码所示:       

    //设置当XMLHttpRequest对象状态改变时调用的函数,注意函数名后面不要添加小括号
    xmlHttpRequest.onreadystatechange = getData;
    
    //定义函数
    function getData(){
        //判断XMLHttpRequest对象的readyState属性值是否为4,如果为4表示异步调用完成
        if(xmlHttpRequest.readyState==4){
            if(xmlHttpRequest.status == 200 || xmlHttpRequest.status == 0){//设置获取数据的语句
                document.write(xmlHttpRequest.responseText);//将返回结果以字符串形式输出
                //docunment.write(xmlHttpRequest.responseXML);//或者将返回结果以XML形式输出
            }
        }
    }

    5、发送HTTP请求

           在经过以上几个步骤的设置之后,就可以将HTTP请求发送到Web服务器上去了。发送HTTP请求可以使用XMLHttpRequest对象的send()方法,其语法代码如下所示:

    XMLHttpRequest.send(data);

           其中data是个可选参数,如果请求的数据不需要参数,即可以使用null来替代。data参数的格式与在URL中传递参数的格式类似,以下代码为一个send()方法中的data参数的示例:

    name=myName&value=myValue

           只有在使用send()方法之后,XMLHttpRequest对象的readyState属性值才会开始改变,也才会激发readystatechange事件,并调用函数。

    6、局部更新

           在通过Ajax的异步调用获得服务器端数据之后,可以使用JavaScript或DOM来将网页中的数据进行局部更新。

    三、完整的AJAX实例

    <html>
    <head>
    <title>AJAX实例</title>
    <script language="javascript" type="text/javascript">   
        function ajaxHttpRequestFunc(){
    		let xmlHttpRequest;  // 创建XMLHttpRequest对象,即一个用于保存异步调用对象的变量
    		if(window.ActiveXObject){ // IE浏览器的创建方式
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }else if(window.XMLHttpRequest){ // Netscape浏览器中的创建方式
                xmlHttpRequest = new XMLHttpRequest();
            }
    		xmlHttpRequest.onreadystatechange=function(){ // 设置响应http请求状态变化的事件
                console.log('请求过程', xmlHttpRequest.readyState);
    			if(xmlHttpRequest.readyState == 4){ // 判断异步调用是否成功,若成功开始局部更新数据
    				console.log('状态码为', xmlHttpRequest.status);
    				if(xmlHttpRequest.status == 200) {
    					console.log('异步调用返回的数据为:', xmlHttpRequest .responseText);
    					document.getElementById("myDiv").innerHTML = xmlHttpRequest .responseText; // 局部刷新数据到页面
    				} else { // 如果异步调用未成功,弹出警告框,并显示错误状态码
    					alert("error:HTTP状态码为:"+xmlHttpRequest.status);
    				}
    			}
    		}
    		xmlHttpRequest.open("GET","https://www.runoob.com/try/ajax/ajax_info.txt",true); // 创建http请求,并指定请求得方法(get)、url(https://www.runoob.com/try/ajax/ajax_info.txt)以及验证信息
    		xmlHttpRequest.send(null); // 发送请求
        }
    </script>
    </head>
    <body>
        <div id="myDiv">原数据</div>
        <input type = "button" value = "更新数据" onclick = "ajaxHttpRequestFunc()">
    </body>
    </html>

     直接运行该段代码可能会出现跨域的现象,控制台的报错信息如下:

    这是因为代码中设置请求的是菜鸟驿站服务端的文件,所以出现跨域导致未正常获取到服务端返回的数据。

    解决办法:复制该段代码在菜鸟驿站的编辑器中粘贴运行即可。

    点击运行前页面显示为:

    点击运行后页面显示为:

    好啦,关于ajax的部分到此就全部学习完成了,给自己点一个大大的赞吧!

     

     

    参考文献:

    【1】https://qqe2.com/java/post/28.html

    【2】https://www.cnblogs.com/kennyliu/p/3876729.html

    展开全文
  • ajax请求五个步骤

    千次阅读 2021-01-02 16:17:10
    ajax请求五个步骤! 今天 咱们讲一讲Ajax请求五个步骤! 1.创建XMLHttpRequest异步对象 var xhr; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xhr=new XMLHttpRequest(); } ...

    ajax请求五个步骤!

    今天 咱们讲一讲Ajax请求五个步骤!
    1.创建XMLHttpRequest异步对象

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

    2.设置回调函数

    xhr.onreadystatechange = callback
    

    3.使用open方法与服务器建立连接

    // get 方式
    xhr.open("get", "test.php", true)
    
    // post 方式发送数据 需要设置请求头
    xhr.open("post", "test.php", true)
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
    

    4.向服务器发送数据

    // get 不需要传递参数
    xhr.send(null)
    
    // post 需要传递参数
    xhr.send("name=jay&age=18")
    

    5.在回调函数中针对不同的响应状态进行处理

    function callback() {
      // 判断异步对象的状态
      if(xhr.readyState == 4) {
        // 判断交互是否成功
        if(xhr.status == 200) {
          // 获取服务器响应的数据
          var res = xhr.responseText
          // 解析数据
          res = JSON.parse(res)
        }
      }
    }
    

    最后补充一下哈 !
    在这里插入图片描述

    展开全文
  • IT人员
  • 原生ajax请求五个步骤

    千次阅读 2021-01-19 20:59:15
    什么是ajax?...2.一个Ajax请求多了,也会出现页面加载慢的情况。 3.搜索引擎的支持程度比较低。 4.ajax的安全性问题不太好(可以用数据加密解决)。 注:如果要使用ajax必须要有后端环境的支持(服务器端)。

    什么是ajax?
    通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
    ajax的优点:
    1.实现局部更新(无刷新状态下)
    2.减轻了服务器端的压力
    ajax的缺点:
    1.破坏了浏览器前进和后退机制(因为ajax自动更新机制)
    2.一个Ajax请求多了,也会出现页面加载慢的情况。
    3.搜索引擎的支持程度比较低。
    4.ajax的安全性问题不太好(可以用数据加密解决)。
    注:如果要使用ajax必须要有后端环境的支持(服务器端)。
    原生ajax请求的五个步骤:
    1.实例化请求对象
    2.建立服务器链接
    3.监听服务器响应
    4.发送请求
    5.响应成功,传递参数
    http请求的两种方式:
    get:用于获取数据,get是在url上传递数据(网址后面的东西),存储量较少,安全系数比较低。
    post:用于上传数据,容量几乎是无限(多用于表单)。

     //1.实例化请求对象
        var http=new XMLHttpRequest ();
     //2.建立服务器链接
              //1.请求方式   get post
              //2.url    服务器接口
              //3.async     指当前请求是同步还是异步     true/false
              //同步:请求完成后去执行后续代码(等待请求完成 )        false
              //异步:请求和后续代码同时执行(不需等待,所有代码同时执行)   true
              //4.5.  用户名和密码,(为了安全)
        http.open();
     /*3.监听服务器响应   1 2 3 4   服务器响应状态    404(页面丢失  200(成功  500(服务器报错*/
        http.onreadystatechange =function(){
            //服务器响应
            if(http.readyState ==4&&http.status ==200){
            //5.响应成功,传递参数
                //可以获取数据
                //服务器返回是json
                http.response
                http.responseText
                //后台返回数据是XML(自定义的html格式)
                http.responseXML
            }
        }
        //4.发送请求
               //send方法的参数取决于请求方式    get post
               //get   url+"?id=1&name=111"
               //post   send()    方法,传递参数
        http.send();
    
    展开全文
  • Ajax 请求步骤

    千次阅读 2021-05-11 09:26:56
    什么是 Ajax Ajax : 即 异步JavaScript 和 XML...Ajax 的工作原理相当关于在用户和服务器之间加了一中间层(Ajax 引擎),使用户操作与服务器响应异步化,并不是所有的用户请求都提交给服务器。像一些数据验证和数据

    什么是 Ajax

    Ajax : 即 异步JavaScript 和 XML ,Ajax 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,而传统不使用Ajax的网页,如果需要更新内容,必需重载整个网页面。

    Ajax 的工作原理

    Ajax 的工作原理相当关于在用户和服务器之间加了一个中间层(Ajax 引擎),使用户操作与服务器响应异步化,并不是所有的用户请求都提交给服务器。像一些数据验证和数据处理等都交给Ajax 引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax 引擎代为向服务器提交请求。

    传统的Web 应用模型

    在这里插入图片描述
    Ajax Web 应用模型
    在这里插入图片描述

    实现 AJAX 的基本步骤

    要完整实现一个AJAX 异步调用和局部刷新,通常需要以下几个步骤:

    1、创建XML HttpRequest 对象,即创建一个异步调用对象。
    2、创建一个新的HTTP 请求,并指定该HTTP 请求的方法,URL及验证信息
    3、设置响应HTTP请求状态变化的函数。
    4、发送HTTP 请求。
    5、获取异步调用返回的数据。
    6、使用JavaScript和DOM 实现局部刷新

    1、创建XMLHttpRequest对象

    不同浏览器使用得异步调用对象有所不同,在 IE浏览器中异步调用使用得是XMLHTTP组件中的XMLHttpRequest对象,而在 Netscape 、 Firefox 浏览器 中则直接使用 XMLHttpRequest 组件,因此,在不同浏览器中创建 XMLHttpRequest 对象的方式有所不同。
    在IE浏览器中创建XMLHttpRequest对象的方式

    var XMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    

    在 Netscape 、 Firefox 浏览器 中创建 XMLHttpRequest 对象的方式

    var XMLHttpRequest = new XMLHttpRequest();
    

    由于无法确定用户使用的是什么浏览器,所以在创建XMLHttpRequest对象时,最好把两种方法都写上,如下代码所示。

    var xmlHttpRequest ;  // 创建一个变量,用于存放 XMLHttpRequest 对象
    function createXMLHttpRequest() { 
        if(window.ActiveXObject()){  // 判断是否是IE浏览器
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP")
        }
        else if(window.XMLHttpRequest){  // 判断是否是 Netscape 或者其它 支持 XMLHttpRequest 组件的浏览器
            xmlHttpRequest = new XMLHttpRequest()
        }
     }
     createXMLHttpRequest()  // 调用创建对象的方法
    

    如果浏览器既不支持ActiveX控件,也不支持XMLHttpRequest组件,那么就不会对xmlHttpRequest变量赋值.

    2、创建HTTP 请求

    创建 XMLHttpRequest 对象后,必须为 该对象创建HTTP 请求,用于说明 XMLHttpRequest 对象从哪里获取数据。

    XMLHttpRequest.open(method,URL,async,username,password)
    

    各参数的解析:

    1、method 参数是用于请求的 HTTP 方法。值包括 GET 、POST、HEAD、PUT、DELETE(不区分大小写)

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

    3、async 参数指示请求使用应该异步执行。如果这个参数为 false,代表请求是同步的,后续对 send() 的调用将阻塞,直到响应完全接受;如果这个参数是 true 或省略,请求是异步的,且通常需要一个 onreadystatechange 事件句柄。

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

    3、设置响应HTTP 请求状态变化的函数

    创建完 HTTP 请求之后,就可以将HTTP请求发送给Web 服务器了,发送 HTTP 请求的目的是为了接受从服务器中返回的数据。从创建XMLHttpRequest对象,到发送数据、接收数据,一共会经历5种状态

    1、未初始化状态。在创建完XMLHttpRequest对象时,该对象处于未初始化状态,此时XMLHttpRequest对象的readyState属性值为0。

    2、初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时,该对象处于初始化状态。此时XMLHttpRequest对象的readyState属性值为1。
    3、发送数据状态。在初始化XMLHttpRequest对象后,使用send()方法发送数据时,该对象处于发送数据状态,此时XMLHttpRequest对象的readyState属性值为2。
    4、接收数据状态。Web服务器接收完数据并进行处理完毕之后,向客户端传送返回的结果。此时,XMLHttpRequest对象处于接收数据状态,XMLHttpRequest对象的readyState属性值为3。
    5、完成状态。XMLHttpRequest对象接收数据完毕后,进入完成状态,此时XMLHttpRequest对象的readyState属性值为4。此时接收完毕后的数据存入在客户端计算机的内存中,可以使用responseText属性或responseXml属性来获取数据。

    XMLHttpRequest对象 只有完后了以上5个步骤后,才可以获取从服务器端返回的数据,因此要想从服务器端获得返回的数据,就必须要先判断 XMLHttpRequest 对象的状态。
    XMLHttpRequest 对象可以响应 readystatechange 事件,该事件在 XMLHttpRequest 对象状态改变时激发,也就是在 readyState 属性发生变化时,因此可以通过 readystatechange 事件调用一个函数,在函数里判断 XMLHttpRequest 对象的 readyState 属性值,如果readyState === 4 则使用 responseText 属性或 responseXml 属性来获取数据。

    XMLHttpRequest.onreadystatechange = getData;  // 设置 XMLHttpRequest 对象状态发生改变时调用的函数
    function getData(){
        // 判断XMLHttpRequest对象的readyState属性值是否为 4 ,如果为4则表示异步调用完成
        if(xmlHttpRequest.readyState === 4){
            // 获取数据的语句
        }
     }
    

    4、设置获取服务器返回数据的语句

    如果XMLHttpRequest对象的readyState属性值等于4,表示异步调用过程完毕。这时候就可以获取数据了。异步调用过程完毕,并不代表异步调用成功了,如果要判断异步调用是否成功,还要判断 XMLHttpRequest 对象的status属性值,只有status === 200 ,才表示异步调用成功。

    如果HTML文件不是在Web 服务器上运行,而是在本地运行,则 xmlHttpRequest.status 的返回值为 0 ,

    XMLHttpRequest.onreadystatechange = getData;  // 设置 XMLHttpRequest 对象状态发生改变时调用的函数
    function getData(){
        // 判断XMLHttpRequest对象的readyState属性值是否为 4 ,如果为4则表示异步调用完成
        if(xmlHttpRequest.readyState === 4){
            if(xmlHttpRequest.status === 200 || xmlHttpRequest.status === 0 ){
                // 获取数据的语句
                document.write(xmlHttpRequest.responseText);//将返回结果以字符串形式输出
            }
        }
     }
    

    5、发送HTTP请求

    经过上面四个步骤后,就可以将HTTP 请求发到Web 服务器上去了,使用 XMLHttpRequest 的send() 方法。

    XMLHttpRequest.send(data)  
    // 其中data是个可选参数,如果请求的数据不需要参数,即可以使用null来替代。
    

    实例代码:

    <html>
    <head>
    <title>AJAX实例</title>
    <script language="javascript" type="text/javascript">    
        var xmlHttpRequest;  //定义一个变量用于存放XMLHttpRequest对象
        //定义一个用于创建XMLHttpRequest对象的函数
        function createXMLHttpRequest(){
            if(window.ActiveXObject){//IE浏览器的创建方式
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }else if(window.XMLHttpRequest){//Netscape浏览器中的创建方式
                xmlHttpRequest = new XMLHttpRequest();
            }
        }
        //响应HTTP请求状态变化的函数
        function httpStateChange(){
            if(xmlHttpRequest.readyState == 4){//判断异步调用是否成功,若成功开始局部更新数据
                if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0) {
                    var node = document.getElementById("myDIv");//查找节点
                    node.firstChild.nodeValue = xmlHttpRequest .responseText;//更新数据
                } else {//如果异步调用未成功,弹出警告框,并显示出错信息
                    alert("error:HTTP状态码为:"+xmlHttpRequest.status + ",HTTP状态信息为:" + xmlHttpRequest.statusText);
                }
            }
        }
        //异步调用服务器段数据
        function getData(name,value){ 
            createXMLHttpRequest();//创建XMLHttpRequest对象
            if(xmlHttpRequest!=null){     
                xmlHttpRequest.open("get","ajax.text",true);//创建HTTP请求
                xmlHttpRequest.onreadystatechange = httpStateChange;//HTTP请求状态变化的函数 
                xmlHttpRequest.send(null);//发送请求
            }
        }
    </script>
    </head>
    <body>
        <div id="myDiv">原数据</div>
        <input type = "button" value = "更新数据" onclick = "getData()">
    </body>
    </html>
    
    展开全文
  • ajax请求五个步骤

    2020-12-25 14:37:33
    1.创建一XMLHttpRequest异步对象 2.设置请求方式和请求地址 3.接着,用send发送请求 4.监听状态变化 5.最后,接收返回的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
  • 使用Ajax五个步骤

    2019-08-29 15:13:55
    使用Ajax五个步骤,初次写CSDN博客,还希望请广大网友多多点评
  • 什么是Ajax以及ajax请求步骤

    万次阅读 多人点赞 2019-04-18 15:56:10
    什么是Ajax以及ajax请求步骤 1.Ajax是什么? Asynchronous JavaScript & XML。Ajax是web开发的一种技术。 2.Ajax请求步骤 (1)创建`XMLHttpRequest`对象,也就是创建一异步调用对象; (2)创建一新的`...
  • AJAX请求的4个步骤

    2020-06-14 14:12:18
    一、创建XHR对象 XMLHttpRequest(W3C标准) 现在的浏览器基本都支持XHR对象,但IE5,6是例外。这时候就需要兼容性的写法 二、监听XHR状态改变事件 ...第一参数为请求方式,第二参数为所连接的服务器,第三参数t
  • Ajax面试题-手写ajax请求五个步骤

    千次阅读 2019-11-02 16:26:20
    Ajax 请求五个步骤 创建 XMLHttpRequest 对象; 设置请求行;设置请求头(针对 post 请求);设置请求体;接收响应数据 /* 创建 XMLHttpRequest 对象 ;XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以...
  • 主要介绍了Java后台判断ajax请求及处理过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • Ajax发送请求的四个步骤

    千次阅读 2019-06-15 12:41:26
    <script type="text/javascript"> window.onload = function(){ var btn = document.getElementById('btn');... //使用Ajax发送请求需要如下几步 //1、创建XMLHttpRequest(); var xhr =...
  • 主要为大家详细介绍了Ajax引擎 ajax请求步骤详细代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • ajax请求数据的步骤

    2019-12-11 14:42:10
    原生ajax五个步骤,直接上代码 function ajax() { // 1.创建ajax引擎对象 var xmlHttp = new XMLHttpRequest(); // 2.绑定监听 xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState =...
  • 原生js ajax请求有几个步骤?分别是什么? a. 创建 XMLHttpRequest对象 var ajax = new XMLHttpRequest() b. 规定请求的类型、URL 以及是否异步处理请求 ajax.open(‘GET’,url,true) c. 发送信息至服务器时内容编码...
  • 有四步请求,分别是 1、创建XMLHttpRequest 2、和服务器进行连接 3、执行回调函数 4、Get/post发送数据
  • ajax请求的四大步骤

    2020-09-10 20:07:26
    接下来 讲解一下 ajax请求的 四个步骤 第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpRequest();XMLHttpRequest对象用来和服务器交换数据。 var xhttp; if (window.XMLHttpRequest) { //现代主流浏览器...
  • 原生js ajax请求有几个步骤?分别是什么? 1.创建 XMLHttpRequest对象 var ajax = new XMLHttpRequest() 2.规定请求的类型、URL 以及是否异步处理请求 ajax.open('GET',url,true) 3.发送信息至服务器时内容编码...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,614
精华内容 21,045
关键字:

ajax请求的五个步骤