精华内容
下载资源
问答
  • 本篇文章只要介绍了js jquery ajax几种用法总结(及优缺点介绍),需要的朋友可以过来参考下,希望对大家有所帮助
  • ajax有几种返回状态

    千次阅读 2016-11-07 14:03:33
    ajax有几种返回状态,一下子惊呆了我 第一感觉是不是200,404这样的,一直是用jquery的ajax请求却不知道什么是ajax的返回状态,马上熟悉下并记录该知识点如下: (0) UNINITIALIZED  未初始化  The object has ...

    ajax有几种返回状态,一下子惊呆了我

    第一感觉是不是200,404这样的,一直是用jquery的ajax请求却不知道什么是ajax的返回状态,马上熟悉下并记录该知识点如下:

    (0) UNINITIALIZED 
    未初始化 
    The object has been created but not initialized. (The open method has not been called.) 
    (XMLHttpRequest)对象已经创建,但尚未初始化(还没有调用open方法)。 

    (1) LOADING 
    载入 
    The object has been created, but the send method has not been called. 
    (XMLHttpRequest)对象已经创建,但尚未调用send方法。 

    (2) LOADED 
    载入完成 
    The send method has been called, but the status and headers are not yet available. 
    已经调用send方法,(HTTP响应)状态及头部还不可用。 

    (3) INTERACTIVE 
    交互 
    Some data has been received. Calling the responseBody and responseText properties at this state to obtain partial results will return an error, because status and response headers are not fully available. 
    已经接收部分数据。但若在此时调用responseBody和responseText属性获取部分结果将会产生错误,因为状态和响应头部还不完全可用。 

    (4) COMPLETED 
    完成 
    All the data has been received, and the complete data is available in the responseBody and responseText properties. 
    已经接收到了全部数据,并且在responseBody和responseText属性中可以提取到完整的数据。 

    . readyState 状态详解 readyState 状态 
    状态说明 

    (0)未初始化 
    此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在,否则浏览器会报错--对象不存在。 

    (1)载入 
    此阶段对XMLHttpRequest对象进行初始化,即调用open()方法,根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。 

    (2)载入完成 
    此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。 

    (3)交互 
    此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式,为在客户端调用作好准备。状态3表示正在解析数据。 

    (4)完成 
    此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为4表示数据解析完毕,可以通过XMLHttpRequest对象的相应属性取得数据。 


    概而括之,整个XMLHttpRequest对象的生命周期应该包含如下阶段: 
    创建-初始化请求-发送请求-接收数据-解析数据-完成 

    恍然大悟,铭记之

    展开全文
  • 下面和大家分享几种利用javascript实现原生ajax方法。 实现ajax之前必须要创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下: 代码如下: var xmlHttp; ...
  • 原生Ajax几种实现方法

    千次阅读 2018-06-28 17:37:04
    自从js了各种框架之后,比如jquery,使用ajax已经变的相当简单了。但时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件。但又要使用ajax这种ajax({ type:"post",//post或者get,非...
    在基于数据的应用中,用户需求的数据如联系人列表,可以从独立于实际网页的服务端取得并且可以被动态地写入网页中,给缓慢的Web应用体验着色使之像桌面应用一样。自从js有了各种框架之后,比如jquery,使用ajax已经变的相当简单了。但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件。但又要使用到ajax这种
    
    ajax({
        type:"post",//post或者get,非必须
        url:"test.jsp",//必须的
        data:"name=dipoo&info=good",//非必须
        dataType:"json",//text/xml/json,非必须
        success:function(data){//回调函数,非必须
            alert(data.name);
        }
    });

    功能该如何办呢?下面和大家分享几种利用javascript实现原生ajax的方法。
    一、首先实现ajax之前必须要创建一个 XMLHttpRequest 对象的。如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下:
    
    var xmlHttp;
    function createxmlHttpRequest(){
    if(window.ActiveXObject){
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest)
    xmlHttp=new XMLHttpRequest();
    }
    

    二、下面使用上面创建的xmlHttp实现最简单的ajax get请求:
    function doGet(url){//注意在传参数值的时候最好使用encodeURI处理一下,防止乱码
        createxmlHttpRequest();
        xmlHttp.open("GET",url);
        xmlHttp.send(null);
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4&&xmlHttp.status==200){
            alert('success');
            }else{
            alert('fail');
            }
        }
    }

    三、使用上面创建的xmlHttp实现最简单的ajax post请求:
    function doPost(url,data){//注意在传参数值的时候最好使用encodeURI处理一下,防止乱码
        createxmlHttpRequest();
        xmlHttp.open("POST",url);
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlHttp.send(data);
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4&&xmlHttp.status==200){
            alert('success');
            }else{
            alert('fail');
            }
        }
    }

    四、下面再分享一个从网上看到的模拟jquery的$.ajax方法的封装:
    var createAjax=function(){
       var xhr=null;
       try{//IE系列浏览器
           xhr=new ActiveXObject("microsoft.xmlhttp");
       }catch(e1){
           try{//非IE浏览器
               xhr=new XMLHttpRequest();
           }catch(e2){
               window.alert("您的浏览器不支持ajax,请更换!");
           }
       }
       return xhr;
    };
    var ajax=function(conf){
       var type=conf.type;//type参数,可选
       var url=conf.url;//url参数,必填
       var data=conf.data;//data参数可选,只有在post请求时需要
       var dataType=conf.dataType;//datatype参数可选
       var success=conf.success;//回调函数可选
       if(type==null){//type参数可选,默认为get
           type="get";
       }
       if(dataType==null){//dataType参数可选,默认为text
           dataType="text";
       }
       var xhr=createAjax();
       xhr.open(type,url,true);
       if(type=="GET"||type=="get"){
           xhr.send(null);
       }else if(type=="POST"||type=="post"){
           xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
           xhr.send(data);
       }
       xhr.onreadystatechange=function(){
           if(xhr.readyState==4&&xhr.status==200){
               if(dataType=="text"||dataType=="TEXT"){
                   if(success!=null){//普通文本
                       success(xhr.responseText);
                   }
               }else if(dataType=="xml"||dataType=="XML"){
                   if(success!=null){//接收xml文档
                       success(xhr.responseXML);
                   }
               }else if(dataType=="json"||dataType=="JSON"){
                   if(success!=null){//将json字符串转换为js对象
                       success(eval("("+xhr.responseText+")"));
                   }
               }
           }
       };
    };

    五、该方法使用也很简单,和jquery的$.ajax方法一样,不过没那么多的参数。仅仅是简单的实现了一些基本的ajax功能。使用方法如下:
    ajax({
        type:"post",//post或者get,非必须
        url:"test.jsp",//必须的
        data:"name=dipoo&info=good",//非必须
        dataType:"json",//text/xml/json,非必须
        success:function(data){//回调函数,非必须
            alert(data.name);
        }
    });

    以上这几种javascript实现原生ajax的方法你们学会了吗?

    展开全文
  • Ajax几种实现方式

    千次阅读 2018-04-12 19:33:10
    Ajax 不是一新的编程语言,而是一用于创建更好更快以及交互性更强的Web应用程序的技术。 使用技术的好处是:不用页面刷新,并且在等待页面传输数据的同时可以进行其他操作。 二、原生 JS 实现 Ajax 这里...

    文章是本人大三期间的学习笔记,一些论断取自书籍和网上博客,碍于当时的技术水平有一些写得不够好的地方,可以在评论处理智讨论~

    一、什么是 Ajax


    Ajax:Asynchronous javascript and xml,实现了客户端与服务器进行数据交流过程同时是异步发送请求。Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
    使用技术的好处是:不用页面刷新,并且在等待页面传输数据的同时可以进行其他操作

    二、原生 JS 实现 Ajax


    这里有一个实现的套路,思路大致是这样的:

    1. 根据不同的浏览器,创建 xmlHttpRequest 对象
    2. 用 open 调用,用 send 发送请求给 Ajax 引擎。
    3. 服务器程序执行完毕后,把结果返回给客户端(用 xml.readyState == 4 && xml.status == 200 判定发送是否成功,然后用 xml.responseText接收后台传回来的数据)
    //返回一个xmlHttpRequest 对象
    function creathttprequest()
    {
    	if(window.XMLHttpRequest)
    		var xml=new XMLHttpRequest();
    	else
    		var xml=ActiveXObject("Miscrosoft.XMLHTTP");
    	return xml;
    }
    
    //这里是触发 AJAX 的事件(比如是一个按钮的点击事件之类的)
    function triggerAjax() {
       //上面思路步骤1,创建一个xmlHttpRequest 对象
    	var xml = creathttprequest();
    
    	//上面思路步骤2
    	xml.open("POST","result.php",false);   //open() 第二个参数是你后台php文件的相对路径
    	xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    	xml.send(url);
    	
    	//上面思路步骤3
    	if(xml.readyState==4&&xml.status==200)
    	{
    		alert(xml.responseText);
    	}
    }
    

    三、JQuery 实现 Ajax

    JQuery实现 Ajax 的方法就简单很多了,已经封装好了一个 $.ajax函数,调用很方便。

    $.ajax({ 
      type: "POST", //发送是以POST还是GET
      url: "ajax.php", //发送的地址
      dataType: "json", //传输数据的格式
      data: {"username": "zwkkkk1","password": 123456}, //传输的数据
      //成功的回调函数
      success: function(msg) { 
        console.log(msg) 
      }, 
      //失败的回调函数
      error: function() { 
        console.log("error") 
      } 
    })
    
    展开全文
  • 使用JQuery中AJAX几种方法

    千次阅读 2013-12-19 17:39:41
    jQuery 也支持 Ajax 技术,它封装了 XMLHttpRequest 组件并初始化,还封装了 Ajax 请求 中各种基本操作,并 把这些操作定义为简单的方法。另 外,把 Ajax请求中各种状态封装为事件, 这样只要调用对应的事件就...
            jQuery 也支持 Ajax 技术,它封装了 XMLHttpRequest 组件并初始化,还封装了 Ajax 请求
    中各种基本操作,并 把这些操作定义为简单的方法。另 外,把 Ajax请求中各种状态封装为事件,

    这样只要调用对应的事件就可以快速执行绑定的回调函数。

    jQuery 封装了多种方法实现与远程进行通信,下面分别进行讲解。


    1.方法一:load(url,[data],[callback])
    load()方法能够载入远程HTML 文件代码并插入到匹配元素中。默认使用GET 方式,传递
    附加参数时自动转换为POST 方式。

    例如,新建一个text.html 文档。
    <!DOCTYPE html PUBLIC "//
    W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.
    dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta httpequiv="
    ContentType"
    content="text/html; charset=utf8"
    />
    <title>Ajax 请求</title>
    </head>
    <body>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    </body>
    </html>
    然后在当前示例文档中输入下面代码:
    <ul></ul>
    <script language="javascript" type="text/javascript">
    $("ul").load("test.html");
    </script>
    这样 jQuery 会自动从 text.html 文档中提取 body 元素包含的代码,并把这些代码插入到匹
    配的ul 元素中。最后显示为:

    <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    </ul>

    请注意,在使用load()方法时,所有页面的字符编码应该设置为utf8,
    否则jQuery 在加载
    文档时会显示乱码。另外,匹配的元素应该只有一个,否则系统会出现异常。例如,下面代码
    将会导致加载出现异常。
    <ul></ul>
    <ul></ul>
    <script language="javascript" type="text/javascript">
    $("ul").load("test.html");
    </script>
    load(url,[data],[callback])方法还可以附带传递参数,这些参数将以 POST 方式传递给服
    务器,并可以定义加载成功时执行的回调函数。例如,下面示例将向服务器端的 test.asp 发
    送一个请求,并以 POST 的方式传递一个参数 name,参数值为“zhu”。 加载成功之后会弹出
    一个提示信息对话框。
    <ul></ul>
    <script language="javascript" type="text/javascript">
    $("ul").load("2088_
    test.asp", {name:"zhu"}, function(){
    alert("加载成功!");
    });
    </script>


    2.方法二: jQuery.get(url,[data],[callback])

    jQuery.get()方法能够通过远程HTTP GET 方式请求载入信息。该方法包含三个参数,参数
    含义与load()方法相同。例如,新建一个test.asp 服务器文件,输入下面代码,用来获取客户端
    传递过来的查询字符串信息,并把这些信息反馈给客户端。请注意,本示例需要服务器环境的
    支持,否则无法执行。
    <%
    dim str
    str = Request.QueryString("name") '从客户端接收查询字符串参数值
    Response.Write str '把接收的查询字符串再响应给客户端
    %>
    然后,在示例文档中输入下面代码:
    <script language="javascript" type="text/javascript">
    $.get("test.asp", {name:"zhu"}, function(data){
    alert(data);
    });
    </script>
    在上面代码中使用jQuery对象的get()方法向服务器端test.asp文件发送一个请求,并 以GET
    的方式向服务器传递一个参数,服务器响应之后会把返回值存储在回调函数参数中,所以,最
    后弹出的提示对话框显示为“zhu”字符信息。


    3.方法三:jQuery.post(url,[data],[callback])
    jQuery.post() 与 jQuery.get() 的操作方法相同, 不同点是它们传递参数的方式不同。

    jQuery.post()是以POST方式来传递参数,所 传递的信息可以不受限制,且 可以传递二进制信息,
    具体用法就不再举例。


    4.方法四:jQuery.ajax()

    jQuery.ajax(options)方法与 9.1 节讲解的几个方法功能相同,都是向服务器端发送请求,并
    传递参数,最后调用回调函数获取响应信息。下面看一个示例,该示例是在 9.1 节示例基础上
    进行修改的。
    首先,建立一个服务器端处理文件(test.asp),代码如下:
    <%
    dim user,where
    user = Request.Form("user")
    where = Request.Form("where")
    Response.AddHeader "ContentType","
    text/html;charset=utf8"
    Response.Write user&"在"&where
    %>
    在上面代码中,首先获取客户端传递过来的参数值,使用 Request.Form()数据集合
    进行读取,因为客户端采用 POST 方式进行传递。然后再把这些信息传递给客户端,考
    虑到传递字符中可能包含中文字符,所以这里需要设置传递的文件字符,编码统一为utf8

    在本地文件中输入下面代码:
    <script language="javascript" type="text/javascript">
    $.ajax({
    type: "POST", //设置请求方式
    url: "2091_
    test.asp", //设置请求URL
    data: "user=朱印宏&where=家里", //设置传递的参数值
    success: function(msg){ //设置响应成功之后执行的回调函数
    alert(msg ); //显示服务器响应的信息
    }
    });
    </script>
    最后执行文件,会弹出如图4 所示的提示信息。

    jQuery.ajax()方法的主要参数名及其说明
    参数名 说 明
    async
    逻辑值,默认为 true,即请求为异步请求。如果需要发送同步请求,该选项设置为 false。同步请求将锁住浏
    览器,用户的其他操作必须等待请求完成才可以执行
    beforeSend 发送请求前可修改 XMLHttpRequest 对象的函数
    cache 是否从浏览器缓存中加载请求信息,默认为 false
    complete 请求完成后回调函数,不管请求是成功还是失败均调用
    contentType 发送信息到服务器时内容编码类型,默认为适合大多数应用场合
    data
    发送到服务器的数据将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。如果 processData 选项禁
    止此自动转换, 必须为名/ 值对格式。如果为数组, jQuery 将自动为不同值对应同一个名称, 如
    {foo:["bar1","bar2"]}转换为'&foo=bar1&foo=bar2'
    dataType 预期服务器返回的数据类型。取值包括 xml、html、script、json 和 jsonp
    error 请求失败时调用函数
    global 是否触发全局 Ajax 事件,默认为 true
    ifModified 是否仅在服务器数据改变时获取新数据,默认为 false
    processData 发送的数据是否可以被转换为对象,默认为 true
    success 请求成功后回调函数,参数为服务器返回数据
    timeout 设置请求超时时间(毫秒)
    type 发送请求的方式,默认为 GET,取值包含 POST、GET、PUT 和 DELETE
    url 发送请求的地址


    5.另外:Ajax 事件

    讲解的几个 Ajax 请求所使用的方法外,jQuery 为了方便用户灵活跟踪 Ajax 请
    求和响应整个完整的过程,还定义了几个事件函数,说明如表7 所示。
    表7 Ajax 事件函数及其说明
    Ajax 事件 说 明
    ajaxStart(callback) Ajax 请求开始时执行函数
    ajaxSend(callback) Ajax 请求发送前执行函数
    ajaxComplete(callback) Ajax 请求完成时执行函数
    ajaxSuccess(callback) Ajax 请求成功时执行函数
    ajaxError(callback) Ajax 请求发生错误时执行函数
    ajaxStop(callback) Ajax 请求结束时执行函数
    例如,下面示例连续跟踪Ajax 请求的全部过程。该过程实际上还是利用readyState 属性进
    行跟踪的,把该属性封装到一个方法中,这样使用更加方便。


    <p></p>
    <script language="javascript" type="text/javascript">
    $.ajax({
    type: "POST",
    url: "2091_
    test.asp",
    data: "user=朱印宏&where=家里"
    });
    $("p").ajaxStart(function(){
    $(this).text("Ajax 请求开始");
    });
    $("p").ajaxSend(function(){
    $(this).text("Ajax 请求开始发送");
    });
    $("p").ajaxComplete(function(){
    $(this).text("Ajax 请求完成");
    });
    $("p").ajaxSuccess(function(){
    $(this).text("Ajax 请求成功");
    });
    </script>


    展开全文
  • 下面小编就为大家带来一篇使用ajax异步提交表单的几种方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • ajax技术带给我们的是良好的用户体验,同时,使用jquery可以简化开发,提高工作效率,接下来,脚本之家小编给大家分享Jquery中ajax提交表单几种方法,需要的朋友可以参考下
  • jQuery的ajax几种请求方法

    千次阅读 2019-03-29 19:26:03
    话不多说,详细代码来介绍这几种请求方式: ajax与服务器进行数据交换。实现不重载页面的情况下,对部分网页进行局部更新。 通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、...
  • 自从javascript了各种框架之后,比如jquery,使用ajax...下面和大家分享几种利用javascript实现原生ajax方法。   实现ajax之前必须要创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器,则需要创建 A
  • AJAX发送请求的几种方法 1.ajax使用原生的方法发起get和post请求 //使用原生的方法发起 get请求 // 1.创建 xhr 对象 var xhr = new XMLHttpRequest(); // 2.设置请求类型 //实质? 当需要传递参数的时候用xx==xx&...
  • 使用AJAX几种理由

    千次阅读 2015-03-26 17:23:29
    组成AJAX技术的大多数技术都能放心的使用很多年,而那些不是热点的、最新的和未经考验的技术只能使用一段时间。现在,对于绝大多数的用户和企业来说,浏览器是一个可信任的应用平台,这在五年前就不是个问题了。对于...
  • 总结一下query中ajax几种方法

    千次阅读 2016-11-09 19:33:38
    1.$.ajax() $.ajax({ type:"POST", //提交数据的类型 POST GET url:"testLogin.aspx", //提交的网址 //提交的数据 data:{Name:"sanmao",Password:"sanmaoword"}, //返回数
  • ajax的常见几种写法以及用法

    万次阅读 多人点赞 2017-03-25 17:01:41
    :不带参数 $ajax(url,callback),即第一个参数是请求的url,第二个参数是回调用函数,json数据封装在result,需要对result的json数据进行解析 $(document).ready(function(){ $("button").click(function(){ ...
  • 1、什么是Ajax   Ajax是异步Javascript和XML(Asynchronous JavaScript and XML)的英文缩写。...Ajax的核心理念在于使用XMLHttpRequest对象发送异步请求。 2、为什么使用Ajax 减轻服务器的负
  • jquery的ajax方式如下几种:  1. $.post(url,params,callback);  2. $.getJSON(url,params,callback);  3. $.ajax();  4. $.load(url,params,callback);  第一种:采用post方式提交
  • jQuery中的Ajax几种请求方法

    万次阅读 2014-12-09 17:23:52
    废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data...
  • jQuery中AJAX请求常见常用的几种方法

    万次阅读 2020-06-16 14:17:04
    AJAX玩玩
  • AJAX几种数据传输

    千次阅读 2014-11-13 11:04:24
    AJAX数据传输: 第一传送方式:load
  • 原文地址 1、什么是Ajax   Ajax是异步Javascript和XML(Asynchronous JavaScript and XML)的英文缩写。...Ajax的核心理念在于使用XMLHttpRequest对象发送异步请求。 2、为什么使用Ajax 减轻服务器...
  • AJAX中常用的几种方法

    2018-12-02 10:18:26
    $.ajax({ url:服务器地址, 请求方式:get|post, data:请求数据, dataType:预期返回的数据类型, success:function(result){ }, error:function(){ } }); 第二: $.get( 服务器地址, 请求数据, ...
  • 3.ajax数据请求几种函数方法 使用promise函数: function getNews (url) { let promise = new Promise((resolve,reject)=>{ let xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function...
  • 通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。 多种实现方式: $.ajax $.post $.get 等等 首先...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 114,525
精华内容 45,810
关键字:

ajax有几种用法