/*
* 我们使用了ajax 的xmlHttpRequest 跟服务器进行交互。
*
* 交互了有四个基本步骤
* 1：创建对象
* 2：建立连接
* 3：发送请求
* 4：接收数据
*
* 这些操作特别繁琐，一个页面有很多地方都发送ajax 请求。
* 这里面我们就使用了一个jQuery 的框架，它提供了一些方法
* 让我们来发送ajax 请求。 我模拟jQuery 封装一个方法出来
* 我们以后用我们自己的方法来发送ajax 请求。
/*
* $.ajax({
* url:"",
* type:""
* data:"",
* success:function(){
* }
* });
* */
var $={
/*
* 进来一个对象，出来一个字符串。
* username=zhangsan&age=11
*
* */
params:function(obj){
var data='';
for(var key in obj){
data+=key+"="+obj[key]+"&"
}
return data.substring(0,data.length-1);
},
/*
* 可以通过此方法来发送一个http 请求。
* */
ajax:function(obj){
//实现这样的功能，可以用来发送请求。
//接收用户传递的数据.
var type=obj.type;
var url=obj.url;
var data=obj.data;
var success=obj.success;
var complete=obj.complete;
var error=obj.error;
//我必须创建一个XMLHttpRequest 对象。
var xhr=new XMLHttpRequest();
if(type=='get'){
url=obj.url+"?"+this.params(data);
data=null;
}
xhr.open(type,url);
/*
* post要给服务器端一个请求头
* */
if(type=='post'){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
data=this.params(data);
}
//我在这里要进行一个判断，如果用户的请求时get
//发送服务器的参数的数据就应该在请求的地址的后面
//username=''&age=''
//如果我的请求是post 请求，
//假设get ，send(null);
//如果是post ，send("username=zhangsan&age=11")
xhr.send(data);
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var data=xhr.responseText;
success(data);
complete();
}
else if(xhr.readyState==4 && xhr.status!=200){
error();
//这个属于请求完成了之后调用
complete();
}
}
}
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="ajax.js"></script>
<script>
$.ajax({
url:"ajax.php",
data:{
"username":"zhangsan"
},
type:"post",
success:function(data){
alert(data);
},
//这个肯定是success 完成之后调用
complete:function(){
alert("响应完成调用");
},
error:function(){
alert("出错了调用");
}
});
</script>
</head>
<body>
</body>
</html>
//jsonp demo。
$.ajax({
type: "get",
async: false,
url: "http://192.168.1.195:8080/yg_mobile/mobile/ygProduct/detail.do?id=1",
dataType: "jsonp",
jsonp: "callback", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback: "fn", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function (json) {
alert(json.id);
},
error: function () {
alert('fail');
}
});
/*生成任意长度的随机字符串。*/
function randomString(len) {
len = len || 32;
var $chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
var maxPos = $chars.length;
var pwd = '';
for (i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
};