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


Posted in jQuery onAugust 04, 2017

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的调用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery中map函数的两种方式
Apr 07 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
详解jQuery-each()方法
Mar 13 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 #jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 #jQuery
基于jquery实现多选下拉列表
Aug 02 #jQuery
jQuery接受后台传递的List的实例详解
Aug 02 #jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 #jQuery
详解jquery选择器的原理
Aug 01 #jQuery
jQuery上传插件webupload使用方法
Aug 01 #jQuery
You might like
php self,$this,const,static,->的使用
2009/10/22 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
PHP编写简单的App接口
2016/08/28 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
Python命名空间详解
2014/08/18 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
python一键去抖音视频水印工具
2018/09/14 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
生产内勤岗位职责
2013/12/07 职场文书
信息技术教学反思
2014/02/12 职场文书
培训协议书范本
2014/04/22 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript