Ajax-01

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)

});

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容