Ajax学习总结
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax学习总结相关的知识，希望对你有一定的参考价值。
ajax：Asynchronous javascript + XML的简写。用户只要触发某一个事件，在不刷新整个网页的情况下，异步求服务器端，更新服务器上的最新数据。
XMLHttpRequest对象，是ajax技术的核心对象
在使用XHR对象时：
A:先必须调用open()方法，open()方法中有三个参数，第一个是请求方式，第二个uRL，第三个是，同步或一部方式。open()方法是准备发送请求。
B:在调用send()方法。发送请求。
C:当请求发送到服务器端，服务器端做出响应，将响应的数据自动填充到XHR对象。
D:接收到响应之后，第一步检查status属性值，确定响应已经成功返回。
1.get请求的异步、同步模式，get请求时的参数放在URL后边。
(1)创建XMLHttpRequest对象var xhr = new XMLHttpRequest();
(2).打开请求，设置这一次的请求xhr.open(请求方式,请求地址,是否异步);
请求方式：get/post
请求地址：url
是否异步：true(异步)/false(同步)
(3).发送请求xhr.send(null);
参数：
post请求时，将携带的参数放入send方法中
get请求时，将携带的参数放在url的后面
(4).处理请求结果
同步处理结果：
if(xhr.status == 200) {//成功
alert(xhr.responseText);
}else{//失败
alert("请求失败，状态码：" + xhr.status + "，状态信息：" + xhr.statusText);
}
异步处理结果：通过onreadystatechange事件监听readyState属性的变化
xhr.onreadystatechange = function () {
//判断readyState属性是否为4，4表示完成了请求
if(xhr.readyState == 4) {
//判断是否成功
if(xhr.status == 200) {
alert(xhr.responseText);
}else{//失败
alert("请求失败，状态码：" + xhr.status + "，状态信息：" +xhr.statusText);
}
}
}
2.post请求的异步、同步模式，post请求时参数放在send方法中。
(1)创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
(2)打开请求
xhr.open("post","ajax",true);
(3).设置请求头，模拟表单进行提交
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
(4)发送请求
xhr.send("username=zhang&password=123456");
(5)处理返回结果
同步处理结果：
if(xhr.status == 200) {//成功
alert(xhr.responseText);
}else{//失败
alert("请求失败，状态码：" + xhr.status + "，状态信息：" + xhr.statusText);
}
异步处理结果：通过onreadystatechange事件监听readyState属性的变化
xhr.onreadystatechange = function () {
//判断readyState属性是否为4，4表示完成了请求
if(xhr.readyState == 4) {
//判断是否成功
if(xhr.status == 200) {
alert(xhr.responseText);
}else{//失败
alert("请求失败，状态码：" + xhr.status + "，状态信息：" +xhr.statusText);
}
}
}
3.封装ajax
<body>
<div id="div1"></div>
</body>
<script>
/*
method : 请求方式：get/post
url : 请求地址：url
param : 请求参数：param
asynch : 同步异步:asynch
success:处理成功返回结果的函数
*/
function ajax (obj) {
//创建对象
var xhr = new XMLHttpRequest();
//判断，若是get请求，将参数拼接在url后面
if(obj.method == ‘get‘) {
//ajax?username=zhang&password=123456
//url本身可能已经携带了一部分参数：ajax?username=zhang&
obj.url += obj.url.indexOf("?") == -1 ? "?" : "&";
obj.url += obj.param;
}
//打开请求：若是get请求，参数要放在url后面，所以先判断是哪种请求
xhr.open(obj.method , obj.url , obj.asynch);
//发送请求：若是post请求，则将参数放入send方法中，而且在发送请求之前要设置请求头
if(obj.method == "post"){
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(obj.param);
}else {
xhr.send();
}
//处理结果：若是异步，先判断readyState属性的状态
if(obj.asynch){//异步
xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
callback();
}
}
}else {
callback();
}
//将处理代码封装到单独函数中
function callback() {
if(xhr.status == 200) {
obj.success(xhr.responseText);
}else {
alert("请求失败，状态码：" + xhr.status + "，状态信息："+xhr.statusText);
}
}
}
/*
将设置ajax请求的参数，放入一个json对象中，这样就不必必须对应参数的位置
*/
var obj = {
method : "get",
url : "ajax",
asynch : true,
param : "username=zhang&password=123456",
success : function (res) {//形参：用来接收请求成功以后的结果
alert(res);//返回一个字符串,json串
//将数据以下拉框的形式显示在页面上
//将json串转为json对象
var resObj = eval("(" + res + ")");
console.log(resObj);
//获取所有的下拉选项值
var cuisines = resObj.cuisines;
console.log(cuisines);
//获取div元素
var div = document.getElementById("div1");
//创建一个select
var sel = document.createElement("select");
//sel.appendChild(new Option("--请选择--" , "-1"));
//通过给options传入下标，来设置选项
sel.options[0] = new Option("--请选择--" , "-1");
//遍历数组
for(var i=0; i<=cuisines.length-1; i++) {
sel.appendChild(new Option(cuisines[i],cuisines[i]));
}
//将select放入div中
div.appendChild(sel);
}
};
ajax(obj)；
</script>
以上是关于Ajax学习总结的主要内容，如果未能解决你的问题，请参考以下文章