ajax带来的便捷,原生javaScript实现Ajax 和 jQuery实现Ajax

作者后台使用的是php语言，所以这里以php后台Api为例子,不影响学习Ajax

一、 javaScript原生使用Ajax

1.get方法

//1.创建对象 兼容处理

var xhr = null;

//处理低版本IE不兼容问题

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

//2.准备发送 请求方式 接口 参数名 参数值 异步

xhr.open('get','xxx.php?username=' + usernameValue ,true);

//3.执行发送

xhr.send(null);

//4.回调

xhr.onreadystatechange = function () {

/*xhr.readyState == 4 是表示数据解析完成，后台处理完成了。

xhr.status == 200 是表示处理的结果是OK的。响应成功*/

if (xhr.readyState == 4){

if(xhr.status == 200){

//返回结果

var result = xhr.responseText;

console.log(result);

}

}

};

2.post方法

//#1.创建对象 兼容性

var xhr = null;

//处理低版本IE不兼容问题

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP")

}

//#2.准备发送

xhr.open('post','xxx.php',true);

// 参数

var param = 'phone=' + phoneValue;

//设置响应头

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

//#3.执行发送

xhr.send(param);

//#4.回调函数

xhr.onreadystatechange = function () {

if(xhr.readyState == 4){

if(xhr.status ==200){

var result = xhr.responseText;

console.log(result);

}

}

}

open()方法后面的参数true和false,表示异步和同步，同步(false)就是先吃完饭才能看电视，异步(true)就是边吃饭边看电视**

二、 jQuery中的使用Ajax

1.基本使用方法

$.ajax({

url: 'xxx.php',

type: 'get',

beforeSend: function(xhr){

console.log(xhr);

},

success: function (res) {

console.log(res);

},

error:function (xhr) {

console.log(xhr);

},

complete:function (xhr) {

console.log(xhr);

}

});

post方式只需把type值改成 get就行

2.快捷方式

$.get('xxx.php',{id:1},function (res) {

console.log(res);

});

$.post('xxx.php',{id:1},function (res) {

console.log(res);

});

以上是get和post两种方式

3.解析Json格式

$.getJSON('xxx.php',{id:1},function (res) {

console.log(res);

});

或者在放置json格式文件的php中进行申明头部

$zhangsan = array(

'name' => '张三',

'age' => 18

);

//格式

header('Content-Type:application/json');

echo json_encode($zhangsan);

?>