资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Ajax常用方法

Ajax常用方法

harriszh / 541人阅读

摘要：在之前，是通过库中的对象实现的，后我们可以直接使用创建一个对象，创建好之后，我们就可以通过对象来调用相应的方法了。

Ajax的主要作用

Ajax的主要作用是向服务器请求数据的同时无需卸载页面，也就是局部刷新，可以带来了更好的用户体验，同时ajax也有他的不足，比如破坏了浏览器的前进后退按钮，对搜索引擎的支持不足，开发和调试工具缺乏

javascript中的Ajax

在javascript中，ajax是通过XMLHttpRequest对象来实现的，这个对象用于和后台进行数据的交互。在ie7之前，XHR是通过MSXML库中的ActiveX对象实现的，ie7后我们可以直接使用 var xhr = new XMLHttpRequest();创建一个XHR对象，创建好之后，我们就可以通过xhr对象来调用相应的方法了。

javascript中Ajax的使用方法

在javascript中，调用Ajax主要分为两步，先open，再send
open指的是开启一个请求，而send负责发送这个请求

open()方法

xhr.open("type","url",true);

第一个参数是请求类型，get/post
第二个参数是请求的地址
第三个参数表示请求是同步还是异步，true代表异步处理
注意的一点就是，open方法不会发送请求，只是启动一个请求准备发送

send()方法

xhr.send(null);

send方法将请求送给服务器 send方法接受一个参数作为要发送的数据，如果不需要发送数据，参数设为null

检测响应状态码
一般请求发送之后，我们可以根据xhr的status属性来判断下一步的操作，status属性会返回一个http状态码
100-200表示请求已经接受，需要继续处理
200-300表示请求已被服务器成功接收
300-400表示重定向，需要客户端采取进一步操作
400-500表示客户端发生错误， 妨碍了服务器的处理
500-600表示服务器处理请求的过程发生错误

`if((xhr.status>=200&&xhr.status<300)||xhr.status==304){    
   console.log(“request success”);
   }else{
       console.log(“request failed”);    
   } `

检测 readyStatus属性
发送异步请求的时候，一般要检测xhr的readyState属性，这个属性表示请求过程的当前活动阶段，一共有5个值，0,1,2,3,4
0代表为初始化，open()未调用
1代表启动 已调用open，未调用send
2代表 已经调用send, 但还没有接受到响应
3代表 接受到部分响应数据
4代表 接受到全部响应数据
当readyState的值发生变化时，就会触发一次readystatechange事件，用这个事件检测每次状态变化后的值。

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){ 
        if(xhr.readyState == 4){            
            if((xhr.status>=200&&xhr.status<300)||xhr.status==304){    
                console.log("request success");
            }else{
                console.log("request failed");    
            }
        }    
    } 
    xhr.open("get","test.php",true);        
    xhr.send(null);
get请求和post请求

get请求，常用于向服务器查询某些信息，get可将查询的字符串参数加在url的末尾

   xhr.open("get","test.phpname1=value1&name2=value2",true);

post请求，通常用于向服务器发送应该被保存的数据，post请求的主体可以包含格式不限且大量的数据，

 xhr.open("post","test.php",true);
 xhr.send("name1=value1&name2=value2");

get请求和post请求的区别

get请求会将参数跟在url后进行传递，而post则是作为http消息实体内容发送给服务器

get方式对于传输的数据有大小限制，通常不能大于2kb，而post方式传递的数据量大小没有限制

get方式会将请求的数据会被缓存起来，可以从浏览器的历史记录中读取这些数据，所以会带来一些安全性方面的问题，而post相对来说安全很多

jQuery中的Ajax

javascript的ajax操作比较复杂， jQuery提供了一系列的方法，大大简洁了Ajax开发

1.load()方法

load(url,data,callback);

load方法主要是用来远程载入HTML代码并插入DOM
第一个参数是要访问的HTML的url地址
第二个参数是要发送至服务器的key:value数据
第三个参数是回调函数，需要注意的是：load方法的回调函数无论请求成功或者失败都会执行

load方法的传递方式是根据参数data来自动指定的

$("#submit").load("test.php",function(){});    //    无参数传递，get方式
$("#submit").load("test.php"{name:"fang",age:"30"},function(){});    //    有参数传递，post方式

2.$.get()方法

$.get(url,data,callback,type)

前两个参数和load方法是一样的
但是回调函数只有在载入成功的时候才会执行
第四个参数是服务器返回的内容格式，如xml,html,json,script,text

$.get("test.php",{
                name : "fang",
                age : "33"
},function(){
//回调函数
},type)

3.$.post()方法

$.post(url,data,callback,type)

前两个参数和load,$.get()方法是一样的
但是回调函数只有在载入成功的时候才会执行
第四个参数是服务器返回的内容格式，如xml,html,json,script,text

$.post("test.php",{
                name : "fang",
                age : "33"
},function(){
//回调函数
},type)

4.$.ajax()方法

$.ajax()方法，这是方法不仅可是实现上面的load,$.get(),$.post()方法，而且还可以设定多种状态下的回调函数
$.ajax(options)是jQuery的最底层Ajax实现，这个方法只有一个参数，但是这个参数内包含了所需要的一切信息，参数以key:value形式存在，所有参数都是可选的
$.ajax(url,type,timeout,data,datatype,beforeSend,complete,success,error,global)这些是所有的参数
url:发送请求的地址
type:请求方式，默认get
timeout:设置请求超时时间
data:发送到服务器的数据
datatype:预期服务器返回的数据类型
beforeSend:发送请求前可以修改XMLHttpRequest对象的函数
complete:请求完成后调用的回调函数
success:请求成功后调用的回调函数
error:请求失败后调用的回调函数
global:表示是否触发全局Ajax事件，默认为true

$.ajax({
    url:"test.php",
    type:"GET",
    datatype:"json",
    beforeSend:function(){},
    success:function(){},
    error:function(){},
    complete:function(){}
})
服务器托管 GPU服务器 Ajax方法 调用ajax方法 ajax使用方法 query常用方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84159.html

相关文章

  • jQuery Ajax应用与常用插件

    jQuery 实现Ajax应用 使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为： load(url,[data],[callback]) 参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数 使用getJSON()方法异步加载JSON格式数...

    bingchen 评论0 收藏0

  • JavaWEB开发14——ajax

    摘要：一概述什么是同步，什么是异步同步现象客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态异步现象客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死的运行原理页面发起请求，会将请求发送 一、Ajax概述1．什么是同步，什么是异步同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待 卡死状态异步现象：客户...

    yearsj 评论0 收藏0

  • Java基础学习之AJAX技术简单学习

    摘要：是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。对象是的核心，所有现代浏览器均支持对象和使用。用于在后台与服务器交换数据。及时有效地帮助学员解决疑难问题，提高学员的学习积极性。 　　Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。　　AJAX...

    番茄西红柿 评论0 收藏2637

  • ajax请求相关

    摘要：因为请求是异步的，我们无法获知请求的进度和响应状态，给我们提供了一个事件，我们可以通过监听这个时间来关注这种变化，所以下一步是注册事件。请求还没有被发送。方法已调用，请求已发送到服务器。到此，请求准备完全完成。 上一篇单独写的是ajax跨域，这一篇就来详细说一说ajax，ajax是现代web开发中必不可少的一部分内容，非常基础也非常重要，这篇总结一下到目前为止我对ajax的理解。 什么...

    h9911 评论0 收藏0

  • ajax请求相关

    摘要：因为请求是异步的，我们无法获知请求的进度和响应状态，给我们提供了一个事件，我们可以通过监听这个时间来关注这种变化，所以下一步是注册事件。请求还没有被发送。方法已调用，请求已发送到服务器。到此，请求准备完全完成。 上一篇单独写的是ajax跨域，这一篇就来详细说一说ajax，ajax是现代web开发中必不可少的一部分内容，非常基础也非常重要，这篇总结一下到目前为止我对ajax的理解。 什么...

    SolomonXie 评论0 收藏0

发表评论

登陆后可评论

0条评论

harriszh

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<