终于！我也开始学习了Ajax！但是学完整个阶段，我只想说，这请求方式也太多了吧！！！对一个初学者来说，真的太难了！！！来看看我和Ajax斗智斗勇的那些辛酸史吧！

一、Ajax简介

1.什么是Ajax？

2.Ajax的优缺点

3.接口测试工具

二、jQuery中的ajax

1.$.get()

2.$.post()

3.$.ajax()

4.ajaxStart()

5.ajaxStop()

三、XMLHttpRequest

1.XMLHttpRequest 简介

2.使用xhr发起get请求

3.使用xhr发起post请求

四、Axios

1.什么是axios

2.axios发起get请求

3.axios发起post请求

4.axios发起请求

五、JSONP

1.JSONP简介

2.自定义JSONP

3.jQuery中的JSONP

一、Ajax简介

1.什么是Ajax？

Ajax，Asynchronous JavaScript and XML，即使用JavaScript语言与服务器进行异步交互，传输的数据为XML。
Ajax并非编程语言，而是一种使用现有标准的新方法。

2.Ajax的优缺点

优点：不需要重新加载整个页面，就可以实现与服务器交换数据并更新部分网页内容。

缺点:在需要同步交互的时候，增多了对服务器的访问次数，有兼容性问题。

3.接口测试工具

Postman，可以直接测试接口能否正确运行。

二、jQuery中的ajax

1.$.get()

$.get() 方法使用 HTTP GET 请求从服务器加载数据。

$.get(URL,data,function(data,status,xhr),dataType)

例：获取id为1的图书列表

 $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {console.log(res)})

2.$.post()

$.post() 方法使用 HTTP POST 请求从服务器加载数据。

$.post(URL,data,function(data,status,xhr),dataType)

例：添加图书

$.post('http://www.liulongbin.top:3006/api/addbook',{ bookname: "红楼梦", author: "曹雪芹", publisher: "北京出版社" }, function (res) {console.log(res);}})

3.$.ajax()

$.ajax()既可以向服务器请求数据，又可以向服务器提交数据

$.ajax({method,URl,data,function(data,status,xhr),dataType})

例1：使用$.ajax()向服务器请求数据

       $.ajax({method:'GET',url:'http://www.liulongbin.top:3006/api/getbooks',// data:{//     id :1// },success :function (res) {console.log(res);}})

例2：使用$.ajax()向服务器发送数据

      $.ajax({method: 'POST',url: 'http://www.liulongbin.top:3006/api/addbook',data: {bookname: "红楼梦", author: "曹雪芹", publisher: "北京出版社"},success: function (res) {console.log(res);}})

使用ajax上传文件

文件上传时，不再是普通的String类型，需要用到H5的FormData方法，同时在ajax中加上两条属性：

contentType : false, //不设置Content-Type请求头

processData : false, // 不处理发送的数据

例：上传头像文件

4.ajaxStart()

ajaxStart() 方法规定Ajax请求开始时运行的函数。该方法会监听当前文档中的所有Ajax请求。

$(document).ajaxStart(function())

注意：自 jQuery 版本 1.8 起，该方法只被附加到文档。

5.ajaxStop()

ajaxStop()方法规定所有的Ajax请求完成时运行的函数。

$(document).ajaxStop(function())

注意：自 jQuery 版本 1.8 起，该方法只被附加到文档。

三、XMLHttpRequest

1.XMLHttpRequest 简介

1.什么是XMLHttpRequest对象？

XMLHttpRequest 对象用于在后台与服务器交换数据。

由图可知，jQuery中的Ajax方法是基于XMLHttpRequest对象封住出来的。

2.创建 XMLHttpRequest 对象的语法：

xhr = new XMLHttpRequest();

3. xhr对象的readyState属性

该属性用来表示当前Ajax请求所处的状态。每个Ajax请求必然处于一下状态中的一个。

2.使用xhr发起get请求

    // 1. 创建 XHR 对象var xhr = new XMLHttpRequest()// 2. 调用 open 函数 // 指定请求方式 与 url地址xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')// 3. 调用 send 函数   //  发起Ajax请求xhr.send()// 4. 监听 onreadystatechange 事件xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {// 获取服务器响应的数据console.log(xhr.responseText)}}

3.使用xhr发起post请求

    // 1. 创建 xhr 对象var xhr = new XMLHttpRequest()// 2. 调用 open 函数xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')// 3. 设置 Content-Type 属性 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')// 4. 调用 send 函数xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')// 5. 监听事件xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText)}}

注意：设置Content-Type是一个固定写法，必须写在open()后面send()前面。

例：使用xhr上传文件

注意：在使用xhr传递参数时，一定要将传递的参数对象改写成拼接字符串的形式再传递，否则会传不进去！！！！

四、Axios

1.什么是axios

Axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。简单理解就是ajax的封装。

相比于原生的XMR对象，axios简单易用；相比于jQuery，axios更加轻量化。只专注于网络数据请求。

2.axios发起get请求

axios.get(URL,{params:{/*参数*/}}).then(callback)

例：使用axios发起get请求

       var url = 'http://www.liulongbin.top:3006/api/getbooks'var paramsObj = { id: 1 }axios.get(url, { params: paramsObj }).then(function (res) {console.log(res.data)})

注意：res.data才是服务器响应回来的真实数据，res是axios为我们包装的数据。

3.axios发起post请求

axios.get(URL,{params:{/*参数*/}}).then(callback)

例：使用axios发起post请求

    var url = 'http://www.liulongbin.top:3006/api/addbook'var dataObj = { bookname: "红楼梦", author: "曹雪芹", publisher: "北京出版社" }   axios.post(url, dataObj).then(function (res) {console.log(res.data)})

4.axios发起请求

axios中也提供了类似jQuery中的$.ajax()的函数。语法如下：

axios({

method:'请求类型',

url:'请求的URL地址'，

data:{ /* POST数据 */},

params:{ /* GET数据 */}

}).then(callbak)

注意：根据请求的类型不同，提交参数的方式也不同！

例：使用axios发起get请求

    var url = 'http://www.liulongbin.top:3006/api/getbooks'var paramsData = { id: 2 }axios({method: 'GET',url: url,params: paramsData}).then(function (res) {console.log(res.data)})

例：使用axios发起post请求

    axios({method: 'POST',url: 'http://www.liulongbin.top:3006/api/addbook',data: { bookname: "红楼梦", author: "曹雪芹", publisher: "北京出版社" }}).then(function (res) {console.log(res.data)})

五、JSONP

1.JSONP简介

什么是jsonp？

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么需要jsonp？

同源策略：是浏览器提供的一个安全功能，它不允许非同源网站之间进行资源的交互，此时我们可以采用jsonp实现跨域获取数据。

jsonp的实现原理？

通过<script>标签中的src属性实现跨域数据访问。注意，jsonp和Ajax之间没有任何关系！!放在本篇是因为也是一种获取数据的方式。同时，jsonp只支持GET数据请求，不支持POST数据请求。

2.自定义JSONP

1.定义一个success回调函数

2.通过<script>标签，请求接口数据

 <script>function success(data) {console.log('JSONP响应回来的数据是：')console.log(data)}</script><script src="http://www.liulongbin.top:3006/api/jsonp?callback=success&name=ls&age=30"></script>

在jsonp中参数是通过url拼接传递。

3.jQuery中的JSONP

jQuery不仅可以发起真正的Ajax请求，也可以发起jsonp请求。只需要在发起请求时添加dataType：'jsonp',此时发起的就是jsonp数据请求。在jQuery中的jsonp请求实现原理是动态添加和移出<script>标签。

    function success(data) {console.log('JSONP响应回来的数据是：')console.log(data)}// jQuery中的jsonp$.ajax({url:'http://www.liulongbin.top:3006/api/jsonp?callback=success&name=ls&age=30',dataType:'jsonp',success:function(res){console.log(res);}})

此时我们打开开发者工具发现，XHR中不再有请求记录，在js中有请求记录，证明这是一个jsonp请求。

另外，使用jQuery发起jsonp请求，jQuery会给我们返回一个回调函数属性名和回调函数参数值名字，我们可以通过jsonp和jsonpCallback来指定。

指定前：

指定后：

指定语句：

通篇梳理下来，在刚接触这个阶段，我们需要熟练使用用ajax和axios发起数据请求以及使用jsonp实现跨域数据请求，这里面的弯弯绕绕说多不多说少不少的，多理解多运用总是可以掌握的，在跟Ajax斗智斗勇几天后，终于可以硬气的说，拿下！！

和Ajax斗志斗勇的日子相关推荐

斗志斗勇之spring cloud
五层结构: 应用层,传输层,网络层,链路层,物理层. 三次握手目的 1.信息对等和防止超时 2.防止出现请求超时导致脏连接. 信息安全CIA原则: 1.保密性Conofidentiality:对需要保 ...
计算机科技新闻,新浪网_科技时代_计算机_新闻报道
分析:你的PC强壮吗? http://www.sina.com.cn 1999年6月29日 16:00综合自从计算机得到广泛应用之后,计算机的速度和功能一直是人们执着的追求对象, 二者实际上也决定了 ...
Java游戏项目开发王者荣耀学会你就是最强王者
王者荣耀为当下热门手游之一,你是否也为连跪烦恼过,与Elo机制斗志斗勇过?与其连跪,得不到良好的游戏体验,还不如自己动手开发王者荣耀,由你自己来制定规则! 不用为自己是Java萌新而感到开发游戏很困难 ...
八十年代曾经的十大经典zz
十大经典故事.书 1.365夜当时的妈妈们几乎人手一册,有了它这一年好过了!我可是一年级就把它全看完喽. 2.童话大王 80年代最杰出的童话期刊,<皮皮鲁和鲁西西><魔方大厦> ...
重上吹麻滩——段芝堂创始人翟立冬游记
重上吹麻滩岁月往悠悠,时光逝水流. 吹麻滩里事,绰影难永休. 在八岁那年,母亲因响应林彪的一声号令:"把医疗工作的重点放到农村去"[六二六指示].于是北京被拆分了四大医院,派往全 ...
难忘的童年~~~~~~真的好怀念！
近日看到网上热烈讨论70年代人类生活之状况,甚感有趣.遂试拟出几条"十大",供各位同年回味.或满足各位九十年代的DDMM们之猎奇心态. 另外所谓七十年代末我认为应该包括从77~83 ...
电视剧《猎毒人》观后感
电视剧<猎毒人>观后感上周日,笔者终于追完了电视剧<猎毒人>.看完这部反毒题材的电视剧,笔者感触良多.全剧情节内容安排,角色塑造等方面,笔者认为,该剧都有与众不同的表现,让笔 ...
浏览器踩坑：浏览器访问已发布服务器的网址显示跨域，但微信浏览器可以正常访问，别人的浏览器也可以正常访问
问题描述您是否遇到这样的问题? 本地打包部署到服务器上后,访问链接登不进去系统,控制台提示跨域问题. 如果您遇到这样的问题,恭喜您!不用再东奔西跑查找问题了,这里有详细的解决方案-->> ...
出生于77年至83年的十大经典
十大经典游戏还记得你小时候玩的什么游戏吗?看看下面有没有. 1.打弹珠即打玻璃珠.玩的人各出数枚,输者将丧失对玻璃珠的所有权.玩法通常是"出纲"或"打老虎洞" ...

和Ajax斗志斗勇的日子

一、Ajax简介

1.什么是Ajax？

2.Ajax的优缺点

3.接口测试工具

二、jQuery中的ajax

1.$.get()

2.$.post()

3.$.ajax()

4.ajaxStart()

5.ajaxStop()

三、XMLHttpRequest

1.XMLHttpRequest 简介

2.使用xhr发起get请求

3.使用xhr发起post请求

四、Axios

1.什么是axios

2.axios发起get请求

3.axios发起post请求

4.axios发起请求

五、JSONP

1.JSONP简介

2.自定义JSONP

3.jQuery中的JSONP

和Ajax斗志斗勇的日子相关推荐

最新文章

热门文章