最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

原生js jquery ajax请求以及jsonp的调用方法

来源:懂视网 责编:小采 时间:2020-11-27 22:33:33
文档

原生js jquery ajax请求以及jsonp的调用方法

原生js jquery ajax请求以及jsonp的调用方法:ajax 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容 同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前
推荐度:
导读原生js jquery ajax请求以及jsonp的调用方法:ajax 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容 同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前

ajax

是用来处理前后端交互的技术,可以改善用户体验,其本质是

XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容

同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前面的任务是耗时操作,则需要一直等待

异步:多条任务并发执行,也就是一个任务的开启,不需要等待其他任务执行结束,效率较高

ajax的语言载体是JavaScript,最大的特点是页面不刷新

1、获取ajax对象

主流浏览器获取方式:火狐、谷歌、safari、opera、IE7以上

var xhr = new XMLHttpRequest();

IE7以下

var xhr = new ActiveXObject("microsoft.XMLHttp");

2、发起请求

创建请求:xhr.open(请求方式get/post,请求地址);

发送请求:xhr.send(post请求数据/get设置null);

3、接收数据

ajax可以接收字符串、html标签、css样式、xml、json

通过监听onreadystatechange事件。来接收ajax状态的变化(readyState属性)

readyState:

-0:表示未初始化,对象已经建立,但是没调用onen方法

-1:对象已建立,但是未调用send方法

-2:发送数据,已调用send方法,但当前状态及http头未知

-3:已接收部分数据,但是数据不全

-4:数据接收完毕

4、常用属性和方法

属性:

-responseText:将响应的数据作为字符串返回,只读

-responseXML:将响应的数据格式化为xml格式并返回,只读

-status:当前请求的http状态码

方法:

-open

-send

-setRequestHeader:设置请求头

get请求

url以字符串形式传递数据,对中文、&、=需要特殊处理,可以使用encodeURIComponent()方法进行编码,编码后的内容在服务端不需要解码,可以正常接收,get多个参数之间用&连接,参数名和参数值用=连接

var xhr = null;
 //获取ajax对象
 if (window.XMLHttpRequest) {
 xhr = new XMLHttpRequest();
 } else{
 xhr = new ActiveXObject("Microsoft.XMLHttp");
 }
 xhr.onreadystatechange = function(){
 console.log(xhr.readyState);
 switch (xhr.readyState){
 case 0:
 console.log("尚未初始化");
 break;
 case 1:
 console.log("尚未建立连接");
 break;
 case 2:
 console.log("正在发送数据");
 break;
 case 3:
 console.log("正在接受数据");
 break;
 case 4:
 console.log("数据接收完成");
 //处理接到的数据,这下面是重点
 var text = xhr.responseText;
 break;
 }
 }
 //创建请求
 xhr.open('get','http://localhost/PHP/ajax01.php?sel=4');
 xhr.send(null);

post请求

-给服务器传参数,需要将参数写在send方法中:参数1=值1&参数2=值2...

-需要调用setRequestHeader()方法,把传送的参数封装成xml格式(模仿form表单提交数据:application/x-www-form-urlencoded);

-传递的中文、特殊符号都需要编码

var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function(){
 if (xhr.readyState == 4) {
 console.log("登陆成功:"+xhr.responseText);
 }
 }
 //等到输入的用户名和密码,
 var uname = "uname="+ encodeURIComponent(document.getElementById("uname").value);
 var pwd = "pwd="+encodeURIComponent(document.getElementById("pwd").value);
 xhr.open("post","http://localhos/PHP/ajax01.php");
 //设置头信息,需要在open方法之后设置
 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 //设置参数
 var str = uname+"&"+pwd;
 xhr.send(str);

get/post的区别:

-请求数据量,get最多2k,post没有限制

-安全方面,post更安全

-传递数据的形式:get是url和参数一起发送,post是参数单独发送

jquery ajax请求

//AJAX
 $.ajax({
 url:"data.txt",
 type:'get',
 dataType:'json',
 data:null,
 async:true,
 timeout:1000,//设定超时时间 一般都是3000毫秒
 cache:false,//设定GET请求的时候不走 缓存数据,原理其实就是在URL末尾加随机数,默认是true
 success:function(data){
 console.log(data)
 },
 })
 //JSONP
 //JSONP都是GET和异步请求的,不存在其他的请求方式和同步请求,而且jquery默认会给JSONP的请求清楚缓存
 $.ajax({
 url:"http://matchweb.sports.qq.com/kbs/calendar?columnId=100000",
 type:'get',
 dataType:'jsonp',
 jsonpCallback:"fn",//自定义传递给服务器的函数名,而不是使用jquery自动生成的
 jsonp:'cb',//把传递函数名的那个形参callBack变为cb
 success:function(data){
 console.log(data)
 },
 })

以上这篇原生js jquery ajax请求以及jsonp的调用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

原生js jquery ajax请求以及jsonp的调用方法

原生js jquery ajax请求以及jsonp的调用方法:ajax 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容 同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前
推荐度:
标签: 方法 请求 ajax
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top