Ajax同步请求:
1、得到核心对象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
Ajax同步请求:
1、得到核心对象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
post请求
1、得到核心对象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
ajax封装
1、得到核心对象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
JQuery与ajax
jquery调用ajax方法:
格式:$.ajax({});
参数:
type:请求方式GET/POST
url:请求地址url
async:是否异步,默认是true表示异步
data:发送到服务器的数据
dataType:预期服务器返回的数据类型
contentType:设置请求头
success:请求成功时调用此函数
error:请求失败时调用此函数
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
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)
});