精华内容
下载资源
问答
  • 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">    
        var xmlHttpRequest;  //定义一个变量用于存放XMLHttpRequest对象
        //定义一个用于创建XMLHttpRequest对象的函数
        function createXMLHttpRequest(){
            if(window.ActiveXObject){//IE浏览器的创建方式
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }else if(windew.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>

    参考文献:

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

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

    展开全文
  • ajax请求的五个步骤第一步,创建XMLHttpRequest对象第二步,注册回调函数第三步,配置请求信息,open(),get第四步,发送请求,post请求下,要传递的参数放这第五步,创建回调函数//第一步,创建XMLHttpRequest对象var...

    46a074aa726a91b7b00acef9ac69f226.png

    ajax请求的五个步骤

    第一步,创建XMLHttpRequest对象

    第二步,注册回调函数

    第三步,配置请求信息,open(),get

    第四步,发送请求,post请求下,要传递的参数放这

    第五步,创建回调函数//第一步,创建XMLHttpRequest对象

    var xmlHttp = new XMLHttpRequest();

    function CommentAll() {

    //第二步,注册回调函数

    xmlHttp.onreadystatechange =callback1;

    //{

    // if (xmlHttp.readyState == 4)

    // if (xmlHttp.status == 200) {

    // var responseText = xmlHttp.responseText;

    // }

    //}

    //第三步,配置请求信息,open(),get

    //get请求下参数加在url后,.ashx?methodName = GetAllComment&str1=str1&str2=str2

    xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);

    //post请求下需要配置请求头信息

    //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    //第四步,发送请求,post请求下,要传递的参数放这

    xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"

    }

    //第五步,创建回调函数

    function callback1() {

    if (xmlHttp.readyState == 4)

    if (xmlHttp.status == 200) {

    //取得返回的数据

    var data = xmlHttp.responseText;

    //json字符串转为json格式

    data = eval(data);

    $.each(data,

    function(i, v) {

    alert(v);

    });

    }

    }

    后台方法private void GetAllComment(HttpContext context)

    {

    //Params可以取得get与post方式传递过来的值。

    string methodName = context.Request.Params["methodName"];

    //QueryString只能取得get方式传递过来的值。

    string str1 = context.Request.Form["str1"];

    //取得httpRequest传来的值,包括get与post方式

    string str2 = context.Request["str2"];

    List comments = new List();

    comments.Add(methodName);

    comments.Add(str1);

    comments.Add(str2);

    //ajax接受的是json类型,需要把返回的数据转给json格式

    string commentsJson = new JavaScriptSerializer().Serialize(comments);

    context.Response.Write(commentsJson);

    }

    本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目!

    展开全文
  • AJAX请求的五个步骤

    2020-06-29 00:05:56
    1、使用ajax发送数据的步骤 第一步:创建异步对象 var xhr = new XMLHttpRequest(); 第二步:设置 请求行 open(请求方式,请求url): // get请求如果有参数就需要在url后面拼接参数, // post如果有参数,就在请求...

    一、原生JS中的Ajax:

    1、使用ajax发送数据的步骤

    第一步:创建异步对象

    
    var xhr = new XMLHttpRequest();
    

    第二步:设置 请求行 open(请求方式,请求url):

    // get请求如果有参数就需要在url后面拼接参数,
    // post如果有参数,就在请求体中传递 xhr.open("get","validate.php?username="+name)
    xhr.open("post","validate.php");
    

    第三步:设置请求(GET方式忽略此步骤)头:setRequestHeader()

    // 1.get不需要设置
    // 2.post需要设置请求头:Content-Type:application/x-www-form-urlencoded
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    

    第四步:设置请求体 send()

    // 1.get的参数在url拼接了,所以不需要在这个函数中设置
    // 2.post的参数在这个函数中设置(如果有参数)
    xhr.send(null) xhr.send("username="+name);
    

    第五步:让异步对象接收服务器的响应数据

    // 一个成功的响应有两个条件:1.服务器成功响应了 2.异步对象的响应状态为4(数据解析完毕可以使用了)
    
    xhr.onreadystatechange = function(){ 
    if(xhr.status == 200 && xhr.readyState == 4){ 
     console.log(xhr.responseText);
     }
    
    

    ajax-get方式请求案例:

    var xhr = new XMLHttpRequest();
    xhr.open("get","validate.php?username="+name);
    xhr.send(null);
    xhr.onreadystatechange = function(){
    if(xhr.status == 200 && xhr.readyState == 4){ console.log(xhr.responseText); document.querySelector(".showmsg").innerHTML = xhr.responseText;;
     }
     }
    

    ajax-post方式请求案例:

    
    var xhr = new XMLHttpRequest();
    xhr.open("post","validate.php");
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send("username="+name);
    xhr.onreadystatechange = function(){
    // 判断服务器是否响应,判断异步对象的响应状态
    if(xhr.status == 200 && xhr.readyState == 4){
     document.querySelector(".showmsg").innerHTML = xhr.responseText;
     }
     }
    

    二、Jquery中的Ajax

    $.ajax({
     type:"get",// get或者post
     url:"abc.php",// 请求的url地址
     data:{},//请求的参数
     dataType:"json",//json写了jq会帮我们转换成数组或者对象 他已经用JSON.parse弄好了 
     timeout:3000,//3秒后提示错误
     beforeSend:function(){ 
     // 发送之前就会进入这个函数
     // return false 这个ajax就停止了不会发 如果没有return false 就会继续
     },
     success:function(data){ // 成功拿到结果放到这个函数 data就是拿到的结果
     },
     error:function(){//失败的函数
     },
     complete:function(){//不管成功还是失败 都会进这个函数
     }
    })
    // 常用
    $.ajax({
     type:"get",
     url:"",
     data:{},
     dataType:"json",
     success:function(data){
     }
    })
    

    $.ajax() 都可以发

    $.post(url,data,success,datatype):本质上只能发送post请求

    $.get(url,data,success,datatype):本质上只能发送get请求

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

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

    1.创建一个XMLHttpRequest异步对象
    2.设置请求方式和请求地址
    3.接着,用send发送请求
    4.监听状态变化
    5.最后,接收返回的数据

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>13545565712</title>
    </head>
    
    <body>
        <script>
            function getchange() {
                //  01-创建对象,判断是否为现代浏览器,处理兼容性问题
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    xmlhttp = new XMLHttpRequest();
                } else {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //  02-判断状态码
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.body.innerHTML = xmlhttp;
                    }
                };
                // 03-设置获取方式,获取数据
                xmlhttp.open('get', 'aaa.json', true);
                // 04-发送请求
                xmlhttp.send();
            }
        </script>
        <p onclick="getchange()">点我试试</p>
    </body>
    
    </html>
    
    展开全文
  • ajax请求的五个步骤第一步,创建XMLHttpRequest对象第二步,注册回调函数第三步,配置请求信息,open(),get第四步,发送请求,post请求下,要传递的参数放这第五步,创建回调函数//第一步,创建XMLHttpRequest对象var...
  • ajax请求的五个步骤 第一步,创建XMLHttpRequest对象第二步,注册回调函数第三步,配置请求信息,open(),get第四步,发送请求,post请求下,要传递的参数放这第五步,创建回调函数//第一步,创建XMLHttpRequest对象...
  • Ajax是Java前端最重要的技术之一,是支撑着前端交互数据的基石,今天我们就来了解下ajax发送请求所需的五个步骤。首先我们需要来了解一下ajaxajax的全称是AsynchronousJavascript+XML。异步传输+js+xml。所谓异步...
  • Ajax是一种可以异步交互数据技术,目前是前端开发程序员们最需要技术之一,那你们知道如何实现ajax吗?它又是怎么实现呢?跟我一起了解一下吧。什么是ajax?AJAX 是一种客户端 Web 开发技术,用于生成交互式 ...
  • 原生ajax请求的五个步骤第一步,创建XMLHttpRequest对象第二步,注册回调函数第三步,配置请求信息,open(),get第四步,发送请求,post请求下,要传递的参数放这第五步,创建回调函数 第一步,创建XMLHttpRequest对象...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 133
精华内容 53
关键字:

ajax请求的五个步骤