ajax技术

 

# 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格式编辑

转载于:https://www.cnblogs.com/htmlli/p/7906322.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值