AJAX

最新推荐文章于 2024-11-03 23:16:52 发布

逐渐头冷

最新推荐文章于 2024-11-03 23:16:52 发布

阅读量107

点赞数

分类专栏：笔记文章标签： ajax

本文链接：https://blog.csdn.net/java_vava2/article/details/114959845

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、AJAX

概述：浏览器提供的API，通过js调用。通过代码控制请求与响应，实现通过JS网络编程
作用：页面局部更新，提高加载速度

1.1原生AJAX

发送ajax请求步骤：1.创建XMLHttpRequest类型对象
2.准备发送，打开与一个网址之间的连接
3.执行发送动作
4.指定xhr状态变化事件处理函数

//1.创建XMLHttpRequest类型对象
var xhr = new HttpRequest();
//2.打开与一个网址之间的连接,相当于输入链接
xhr.open("GET","https://jsonplaceholder.typicode.com/users");
//3.通过链接发送请求
xhr.send(null);
//4.指定xhr状态变化事件 处理函数
xhr.onreadystatechange = function (){
    //通过判断状态确定是否请求完成
    if(this.readyState===4){
        console.log(this.responseText)
    }
}

1.1.1 XMLHttpRequest类型对象

AJAX API中核心提供的是一个XMLRequest类型，所有的AJAX操作都用到的类型 var xhr = new HttpRequest();

1.1.2 open()方法

语法：xhr.open(method,url)

method:要使用的http方法，GET/POST/PUT/DELETE等
url ：要向其发送请求的url地址，字符串格式

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

1.1.3 setRequestHeader()方法设置请求头

此方法必须在open()和send()之间调用
语法：xhr.setRequestHeader(header,value)

header:一般设置"Content-Type"传输数据类型，即服务器需要我们传送的地数据类型。
value:具体的数据类型

设置请求头：get方法不需要设置而post方法必须设置
xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”)

1.1.4 send方法发送一次请求

如果使用的是get方法请求，不再需要send中传参数，如果想传参数，直接写在网址后

1.1.5 指定回调函数，处理得到的数据

readyState属性，返回一个XMLHttpRequest代理当前所处的状态，有别于readystatechange事件是在xhr对象状态变化时出发，也就意味着事件会被多次出发

1.1.6 JSON格式数据

JSON和js对象的区别：1.JSON的数据不需要存到变量中2.结束时不需要写分号3.JSON数据的属性名必须加引号
JSON对象：浏览器内置JSNON对象，封装了parse()方法（将对象转化成字符串）和 stringify()方法（将对象转化成字符串）

1.2 jQuery使用AJAX方法

1.2.1ajax()方法:获取指定接口的数据

语法:$ajax() ; 参数: 一个配置的对象
对象选项参数介绍:

url：请求地址
type：请求方法，默认为true
dataType:服务端相应数据类型如：json,xml, text.html.script
contentType：请求体内容类型，默认application/x-www-form-urlencoded
data：需要传递到服务端的数据，如果是GET则通过URL传递,POST通过请求体传递
timeout ：请求超时时间 (单位毫秒)
beforeSend:请求发起之前触发(响应状态码200)
error:请求失败触发
complete:请求完成触发(不管成功与否)

$.ajax({
    url: "https://jsonplaceholder.typicode.com/users",
    type:"GET",
    dataType: "json",
    success: function(data) {
        console.log(data)
    }
})

1.2.2 jQuery.get()方法

语法：$get(url,data,callback)

$.get("http://localhost:3000/comments",{"id":2},//可以直接通过参数筛选
function(data){
  console.log(data);
})

1.2.3 jQuery.post()方法（发送POST请求）

初始ajax方法实现添加数据

$.ajax({
    url: "https://localhost:3000/comments",
    type:"POST",
    dataType: "json",
    data:{"postId":2,"content":"bad"},
    success: function(data) {
        console.log(data);
    }
})
```js
jQuery中给封装了post方法发送请求
* $.POST(url,data,callback)
```js
$.post("url地址",{"postId":3,"content":"bad"},function(){
	console.log(data);
})

1.2.4 put请求

$.ajax({
	url:"",
	type:"put",
	dataType:"json",
	data:{"content":"good"	},
	success:function(){
	console.log(data);}
})

1.3Axios库（Ajax封装库）

引入库 src=“https://unpkg.com/axios/dist/axios.min.js”
使用axios

axios.get("http:///localhost:3000/posts?id=1")
     .then(function (response){//请求成功执行then之后的函数
            console.log(response)
     })
     .catch(function(error){//请求失败执行catch之后的函数
         console.log(error)
     })

1.3.1 Axios API

可以通过向axios()传递相关配置创建请求
axios(config) config为对象格式的配置选项
axios(url,config) config 可选

常用配置项：

url: 请求服务器URL
method ：创建请求时使用的方法
baseURL：传递相对URL前缀，自动加载URL前面
headers：即将被发送的字定义请求头
params：即将与请求一起发送的URL参数（参数是一个对象）
data：作为请求主题被发送的数据
timeout：指定请求超时的毫秒数
responseType：表示服务重启相应的数据类型默认json

axios({
    url:"http://localhost:3000/comments",
    method:"get"
    baseURL://(公共的url地址)
}).then(function(res){
    console.log(res.data)
})

1.1.2 全局配置默认值

将过个请求中公共的属性设置全局默认值
axios.defaults.baseURL=https://api.example.com;

1.1.3 axios拦截器

作用在发送请求或响应之前拦截

//添加请求拦截器。在发送请求之前添加配置项
axios.interceptors.request.use(funcftion(config){
    //在发送之请求之前做什么
    config.params = {
        id:2//筛选id为2 的值
    }
}，function(error){
    //请求错误以后做哪些操作
}
    return config
)
//添加响应拦截器
axios.interceptors.response.use(function(response){
    //对响应数据做什么
    return response;
}, function(error){
    //对响应错误做什么
})

1.3.4快速请求方法

get请求获取数据

axios.get("http://localhost:3000/users?id=2")
    .then(function(res){
            console.log(res.data)
    })
//或利用第二个参数
axios.get("http://localhost:3000/users",{
    params:{
        id:3
    }
})
    .then(function(res){
            console.log(res.data)
    })

post添加数据

axio.post("http//localhost:3000/users",{
    "name":"nancy",
    "age":19,
    "class":2
})
.then(function (res){
    console.log(res.data)
})

2 .XHR2.0

xhr.onload事件:只有在请求完成是触发

xhr.onprogress事件:只有在请求进行中触发

var xhr = new XMLHttpRequest();
xhr.open("GET","http://localhost:3000/posts");
xhr.onload = function (){
    console.log("load",this.readyState)//load 4
}
xhr.onprogress = function(e){
    console.log("progress",this.readyState)//progress 3
    //在周期性请求过程中，接收到的数据个数
    console.log(e.loaded);//444
    //接收数据的总个数
    console.log(e.total);//444
}

response属性
以对象的形式标书响应体，类型取决于responseType,响应结果以responseType的值为响应格式，无需像responseText一样得到字符串再转换

二、跨域访问

2.1 同源策略

域名，协议，端口完全相同才可称得上同源。同源策略是浏览器的一种安全策略，同源策略之下的同源地址才可以发送Ajax请求。不同源的请求是跨域请求
同一个域名，端口号，协议而目录不同是同源

2.2 跨域解决方案

2.2.1 JSONP原理

在客户端借助script标签请求服务端的一个地址,地址返回一段带有全局函数调用的JavaScript脚本.在调用函数中,原本需要返回给客户端的数据通过参数传递给这个函数.这样的客户端的函数中可以通过参数得到原本服务器端想要返回的数据

jQuery中的jsonp
设置dataType的值为jsonp即可使用

$.ajax({
	url:"url",
	type:"GET",
	dataType:"jsonp",//设置为JSONP会以该格式传输数据，
	jsonp:"cb",  		//这条属性可以设置回调函数的参数名称（必须与后台接口的回调函数参数名保持一致）
	jsonpCallback:"abc" ,//重新命名Jq自动分配的回调函数的名称
	data:{"wd":"ajax"},
	success :function(){	
		}
})