jquery基础学习之AJAX篇（五）

理解不深，只知道这么用

 

jquery 中ajax的请求方法

 

$.ajax({

url：‘http://...’, //请求网址

type:'GET', //请求方法

success:function(data){}//成功后的回调函数，这个data就是拿到的数据

})

 

跨域获取数据 ，jsonp方式跨域，只要规定 dataType:'jsonp'即可

$.ajax({

url:`https://api.douban.com/v2/book/search?q=历史`,
type:'GET',
dataType:'jsonp',
success:function (data) { //回调函数
let aa=JSON.stringify(data)//json转成字符串,才能填充到网页中去
console.log(data)//获取的数据

  //对数据的处理

let cc=data.books.filter((item)=>{
return item.rating.average >8
}).map((item)=>{
return {
title:item.title,
bookId:item.id,
publisher:item.publisher
}
})
//console.log(cc)

}
})
}

 

script 标签跨域

向头部插入一个script标签，里面写上回调函数名称，然后就可以在回调函数中拿到数据并处理了。

function showData(data){
console.log(data)//这个data就是拿到的数据，可以在这里进行相关的处理
}

$('head').append('<script src='https://api.douban.com/v2/book/search?q='+'爱情'+'&callback=showData'><\/scpript>')

 

资料参考：https://www.cnblogs.com/chiangchou/p/jsonp.html

什么是 AJAX？

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

HTTP 请求：GET vs. POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

 

跨域

首先我们需要明白，在页面上直接发起一个跨域的ajax请求是不可以的直接用ajax去请求一个网站，会报错，这时候在head添加一个script src='http://...?callback=funcName'的形式
然后这个funcName 函数就是接受获取的数据的，他有一个data参数，就是获取来的数据

 

如果出现报错 CORS头缺少“Access-Control-Allow-Origin”。 这条需要服务端去解决
有时候你会发现其它都没问题，出现这个错误：这个错误代表服务端拒绝跨域访问。如果出现这个错误，就需要在服务端设置允许跨域请求。
response.setHeader("Access-Control-Allow-Origin", "*"); 设置允许任何域名跨域访问