Ajax-JQuery基础

Ajax

异步无刷新技术

1. 方法
   1. open(A,B,C) ---准备数据

 

1. ->请求方式：get/post
2. ->请求地址url
3. ->是否异步true/false

 

1. 1. send(A) 发送数据

 

1. ->get: null，参数已经跟在请求的URL后面

 -->post:有参数写参数，无参数写null

 

1. 实现步骤

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

var json = JSON.parse(xhr.responseText);//转为json对象

 

 

1. 异步

若为异步，需要为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

1. $.ajax()

jquery调用ajax方法：

格式：$.ajax({});

参数：

type：请求方式GET/POST

url：请求地址url

async：是否异步，默认是true表示异步

data：发送到服务器的数据

dataType：预期服务器返回的数据类型

contentType：设置请求头

success：请求成功时调用此函数

error：请求失败时调用此函数

 

get和post在使用的方式上没有区别，不需要像原生一样需要转换和判断；

 

1. $.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)

});

1. $.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)});