# ajax发送异步请求
下面关于ajax发送数据,都是采用formdata方式发送的,请求头都默认为("content-type","application/x-www-form-urlencoded");
服务器端需要对url进行URLencoded转码获取数据.
还有一种发送post数据的方式,采用request payload载荷,发送json数据请求头为("content-type","application/json;charset=utf8");
服务器端需要采用对json格式进行转码,将json格式的字符串,转化为对象
## 原生ajax
1. GET方式发送ajax
```javascript
// 创建异步对象
var xhr = new XMLHttpRequest();
// 请求行
xhr.open("get","xxx.php?key=value");
// 注册回调函数
xhr.onload = function (backData) {
console.log(backData);
}
// 请求主体
xhr.send(null);
```
2. POST方式发送ajax
```javascript
// 创建异步对象
var xhr = new XMLHttpRequest();
// 请求行
xhr.open("post","xxx.php");
// 请求头
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
// 注册回调函数
xhr.onload = function (backData) {
console.log(backData);
}
// 请求主体
xhr.send("key1=value1&key2=value2");
```
3. 封装一个简单的ajax
```javascript
/**
* type:发送方式,get ,post
* url:地址
* data:发送的数据
* success:回调函数
* */
function ajax (option){
// 创建异步对象
var xhr = new XMLHttpRequest();
// 请求行
if(option.type=="get"&& option.data){
option.url += "?" +option.data;
option.data=null;
}
xhr.open(option.type, option.url);
// 请求头
if(option.type=="post"&& option.data){
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
}
// 注册回调函数
xhr.onreadystatechange = function (xhr.) {
if(xhr.readyState==4&&xhr.status==200){
// 判断数据类型
var type = xhr.getResponseHeader("content-type");
// xml格式
if(type.indexOf("xml")!=-1) {
option.success(xhr.responseXML);
// json格式
}else if(type.indexOf("json")!=-1){
option.success(JSON.parse(xhr.responseText));
}else {
option.success(xhr.responseText);
}
}
}
// 请求主体
xhr.send(option.data);
}
```
4. jQuery的ajax
自己封装的ajax会存在一些问题,直接使用jQuery封装的ajax会避免很多麻烦,解决兼容性问题,并对细节的处理更好.
下面直接写了一个大概的使用方法,具体使用方法参考jQuery文档.
```javascript
$.ajax({
type:"post",
url:"xxx.php",
data:"key1=value1&key2=value2",
// 数据接收成功的回调函数
success:function (backData) {
console.log(backData);
},
// 数据接收错误的回调函数
error:function (backData) {
console.log(backData);
}
dataType:"json"
})
```
注该随笔使用的md格式编辑