Ajax发送的请求的过程
- 1.创建一个请求对象
- 2.开启一个请求
- 3.发送请求
- 4.请求到数据 状态的变化
一个简单的get请求
<script>
var btnObj = document.getElementsByTagName("button")[0];
btnObj.onclick = function () {
//1.创建请求对象
var requstObj = new XMLHttpRequest();
//2.这是请求参数 (请求的方式| URL | 是否是一部请求)
requstObj.open("get","http://127.0.0.1/PHP/php-Service/05-Ajax01.php",true);
//3.发送请求
requstObj.send();
//4.监听请求的状态
requstObj.onreadystatechange = function () {
//readyState 对应 0 是请求未初始化
// 1是 服务器连接已经建立
//2是请求已经接收
//3.是请求处理中
// 4是请求已经完成
console.log(requstObj);
}
}
</script>
多次Get请求的 缓存数据问题 和 中文问题
- 缓存问题
注意:当浏览器向
同一个URL
发送多次get
网络请求时,浏览器会默认保存·缓存数据·返回给我们,对应的状态码是304
解决方案: 就是在URL
后面拼接一个无用的时间戳
字符串或者不相同的随机数
- URL中文转码
encodeURI()
var url = "http://www.ezcarry.com?name=希望&psd=123";
//转化
url = encodeURI(url);
post和get请求的简单装
function ajax(obj) {
var request = null;
if (window.XMLHttpRequest){
request = new XMLHttpRequest();
}else {
request = new ActiveXObject();
}
obj.type = obj.type || "get";
//get请求
if (obj.type == "get"){
var time = (new Date()).getTime();
//清除get的缓存
obj.url += "?t=" + time;
//转化中文转码
if (abString(obj.data).length > 0){
obj.url = encodeURI(obj.url + "&" + abString(obj.data));
}
request.open(obj.type,obj.url,true);
request.send();
}else {
//post 请求
request.open(obj.type,obj.url,true);
//设置请求头
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(abString(obj.data));
}
request.onreadystatechange = function () {
if (request.readyState === 4){
clearInterval(timer);
if (request.status == 200){
obj.success(request);
}else {
obj.error(request);
}
}
}
obj.timeOut = obj.timeOut || 1500;
var timer = setTimeout(function () {
//取消请求
request.abort();
alert("wifi失联了。。。")
},obj.timeOut);
}
/**
* 对象转化为字符串拼接 key=value
* */
function abString(data) {
var arrm = [];
for (var key in data){
arrm.push(key+"="+data[key]);
}
return arrm.join("&");
}
jQ中的Ajax简单介绍
-
get
请求 -
$.get(url, [data], [callback], [type])
- 第一个参数: 请求路径
- 第二个参数: 提交到服务器端的具体的参数(对象|查询字符串)
- 第三个参数: 网络请求成功的回调(responseText,statusText,xhr)
- 第四个参数: 控制服务器返回给我们的响应体的数据类型
xml | text | json | jsonP |script
$("button").eq(0).click(function () {
// 语法:$.get(url, [data], [callback], [dataType])
//dataType:设置服务器返回的数据类型mtext,json,script,jsonp
$.get("http://127.0.0.1/PHP/php-Service/02-from-get.php",{userName:"BB",psd:"mmm"},function (responseText,statusText,xhr) {
});
});
post的请求参数和get的一样
序列化
把要提交的表单的数据
拼接成字符串
,必须注意的事 比如input
标签要有name
属性值
$("form").serialize() 把表单中所有的数据都拼接成查询字符串
$("form").serializeArray() 把表单中所有的数据都拼接成对象数组
load方法主要是用在加载 请求的数据是 html
//直接会把请求的html代码数据 放到div里面
$("div").load("php/01-jQ.html ");
注意 如果想对 网址中的 html代码 过滤的话 直接 空格+ 标签
//加载网址中的html代码 放到div中 并过滤掉 网址html代码中的p标签
$("div").load("php/01-jQ.html p");
jQ中网络事件的监听
/*
* 网络事件 监听的方法
* */
//只要监听网络成功或者失败 就会执行下面的2个方法
$(document).ajaxSuccess();
$(document).ajaxError();
//只会执行一次,第一个网络请求开始的时候 执行
$(document).ajaxStart();
//执行多次,只要有网络请求就会执行
$(document).ajaxSend();
$(document).ajaxComplete();
//只会执行一次 就是最后一个网络请求完成时 执行
$(document).ajaxStop();
网友评论