Ajax
异步无刷新技术
- 方法
- open(A,B,C) ---准备数据
- ->请求方式:get/post
- ->请求地址url
- ->是否异步true/false
-
- send(A) 发送数据
- ->get: null,参数已经跟在请求的URL后面
-->post:有参数写参数,无参数写null
- 实现步骤
- 得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2、准备/打开请求
open(请求类型GET/POST,请求的路径,是否异步true/false);
3、发送请求
send(参数/null);
注:如果是get请求,参数直接跟在请求路径后面,send()方法中设置null;
如果是post请求,有参数则设置参数,无参数设置为null;
4、解析响应数据
1、判断响应是否成功 status=200 (404=未找到资源;500=服务器异常;200=成功)
2、得到后台响应数据 responseText
var json = JSON.parse(xhr.responseText);//转为json对象
- 异步
若为异步,需要为xhr添加onreadystatechange监听事件,
当xrh的readyState属性值发生改变时,都会触发该事件;
(0=尚未调用open方法;1=已调用open方法未调用send方法,
2=调用send方法,未接收到响应;3=接收到部分响应;4=响应完全接收)
// 监听readystate事件 xhr.onreadystatechange = function() { // 如果是异步请求,需要等待数据完全响应后再做处理 if (xhr.readyState == 4) { // 4、解析响应数据 if (xhr.status == 200) { // 1、判断响应是否成功 status=200 // 2、得到后台响应数据 responseText var user = JSON.parse(xhr.responseText); |
post请求
由于Post请求的机制问题,需要模拟表单提交,代码如下:
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
Ajax-jQuery
- $.ajax()
jquery调用ajax方法:
格式:$.ajax({});
参数:
type:请求方式GET/POST
url:请求地址url
async:是否异步,默认是true表示异步
data:发送到服务器的数据
dataType:预期服务器返回的数据类型
contentType:设置请求头
success:请求成功时调用此函数
error:请求失败时调用此函数
get和post在使用的方式上没有区别,不需要像原生一样需要转换和判断;
- $.get()
1.请求json文件,忽略返回值
$.get('../js/cuisine_area.json');
2.请求json文件,传递参数,忽略返回值
$.get('../js/cuisine_area.json',{name:"tom",age:100});
3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.get('../js/cuisine_area.json',function(data){
console.log(data)
});
4.请求json文件,传递参数,拿到返回值
$.get('../js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data)
});
- $.post()
和get情况一样,也有四种方式:
1.请求json文件,忽略返回值
$.post('../js/cuisine_area.json');
2.请求json文件,传递参数,忽略返回值
$.post('../js/cuisine_area.json',{name:"tom",age:100});
3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.post('../js/cuisine_area.json',function(data){
console.log(data)});
4.请求json文件,传递参数,拿到返回值
$.post('../js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data)});