Jquery Ajax

Jquery Ajax

1.Ajax简介

​ ①Ajax是一种异步刷新技术，无需等待浏览器返回结果即可执行下一步操作

​ ②使得JavaScript可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果

2.请求方式

2.1 Get请求和Post请求的区别

​ Get请求和Post请求是HTTP请求的两种方式

一、应用场景

​ ①幂等请求：指得是一个请求方法执行多次和仅执行一次的效果完全相同

​ ②Get请求：是幂等请求，一般用于对服务器资源不会产生影响的场景，比如说请求一个网页的资源

​ ③Post请求：不是幂等请求，一般用于对服务器资源产生影响的场景，比如注册一个用户

二、是否缓存

​ 因为二者应用场景不同，浏览器一般对Get请求缓存，但很少对Post请求缓存

三、传参方式

​ ①Get请求：通过查询字符串传参

​ ②Post请求：通过请求体传参

四、安全性

​ Get请求会将请求的参数放入URL中向服务器发送，因为请求的URL会被保留在历史记录中，所以相对于Post请求不是很安全

五、请求长度

​ 浏览器会对URL长度限制，所以会影响Get请求发送数据的长度

六、参数类型

​ Get请求：只允许ASCll字符

​ Post请求：支持更多的数据类型，如文件、图片等

2.2 $.ajax

​ Jquery最原始调用ajax的方式，格式：$.ajax({})

参数	作用
Type	请求方式Get或Post
URL	请求地址url
async	是否异步，默认为true表示异步
data	发送到服务器的数据
dataType	预期服务器返回的数据类型
contentType	设置请求头
success	请求成功时调用此函数
error	请求失败时调用此函数

 $.ajax({
    url:"js/data.json",
    type:"get",
    dataType:"json",
    success:function(data){
        console.log("__成功__");
        console.log(data);
    },
    error:function(jqxhr){
        console.log("失败");
        console.log(jqxhr);
    }
})

2.3 $.get、$.post、$.json

​ 请求成功时可调用回调函数，如果需要请求失败时执行函数，需要使用$.ajax

//1.请求json文件、忽略返回值
$.get('js/data.json');

//2.请求json文件、传递参数、忽略返回值
$.get('js/data.json'),{name = 'xiaoguo',age = '23'};

//3.请求json文件、请求成功后拿到返回值
$.get('js/data.json',function(data){
    console.log(data);
});

//4.请求json文件、传递参数、拿到返回值
$.get('js/data.json',{name = 'xiaoguo',age = '23'},function(data){
      console.log(data);
});

//5.请求json文件、传递参数、拿到返回值
$.post('js/data.json',{name = 'xiaoguo',age = '23'},function(data){
      console.log(data);
});

//6.请求json文件、传递参数、拿到返回值
$.json('js/data.json',{name = 'xiaoguo',age = '23'},function(data){
      console.log(data);
});