JS第三阶段 Ajax

92 阅读 0 评论 61 点赞

我是靠谱客的博主留胡子鸭子，最近开发中收集的这篇文章主要介绍JS第三阶段 Ajax，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

菜鸟：XMLHttpRequest格式集锦：

function loadXMLDoc(){
//创建XMLHttpRequest对象
var xmlhttp;
//创建XMLHttpRequest对象
xmlhttp=new XMLHttpRequest();
//onreadystatechange:存储函数(或函数名)，每当readyState属性改变时，就会调用该函数。
xmlhttp.onreadystatechange=function(){
//readyState:存有XMLHttpRequest的状态,从0到4发生变化。0: 请求未初始化;1: 服务器连接已建立;2: 请求已接收;3: 请求处理中;4: 请求已完成，且响应已就绪。∴onreadystatechange事件被触发5 次(0-4)
//status: 200: "OK";404: 未找到页面。
if (xmlhttp.readyState==4 && xmlhttp.status==200){//∴表示响应已就绪
//responseText：来自服务器的响应，获得字符串形式的响应数据。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//open(method,url,async)方法=open("GET"/"POST","url",true)
xmlhttp.open("POST","/ajax/demo_post2.asp",true);
//setRequestHeader(header,value)方法=setRequestHeader("头名称","头的值")。发送HTTP协议的头文件，告诉服务器客户端要下载什么信息
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//send()仅用于POST请求
xmlhttp.send("fname=Bill&lname=Gates");
}
//输出：
//AJAX
//btn:请求数据
//click->你好，Bill Gates，今天过得怎么样？
//h5
//<h2>AJAX</h2>
//<button type="button" onclick="loadXMLDoc()">请求数据</button>
//<div id="myDiv"></div>

callback 函数

var xmlhttp;
function loadXMLDoc(url,cfunc){//loadXMLDoc->cfunc
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=cfunc;//cfunc->onreadystatechange
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction(){
loadXMLDoc("/ajax/test1.txt",function(){//loadXMLDoc->cfunc重复接收
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}

showHint()函数

function showHint(str){//showHint()函数,str
var xmlhttp;
xmlhttp=new XMLHttpRequest();
if (str.length==0){//str
document.getElementById("txtHint").innerHTML="";
return;
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);//str
xmlhttp.send();
}
//输出:
//input不输入字符就回车，得到："ERR1: 未找到您查询的数据！"
//input输入字符，得到：建议："建议：no suggestion"
//h5
//<h3>请在下面的输入框中键入字母（A - Z）：</h3>
//<form action="">
//姓氏：<input type="text" id="txt1" onkeyup="showHint(this.value)" />//onkeyup事件触发
//</form>
//<p>建议：<span id="txtHint"></span></p>

项目：可恶的Ajax！以下是模板——

var min = window.location.href //刷新当前页面,向指定的url提交数据/~.~.Reload()会提示是否提交
var need = (min || '').split("?"); //字符串对象.split(字符串或正则表达式,指定返回的数组的最大长度):把一个字符串分割成字符串数组.?get,参数是什么.
var type = (need[1] || '').split("="); //post,...=true
var keycode = type[1]
var obj = {}
obj.page = 1;
obj.limit = 50; //变量
obj.lockKeyGroupRandCode = keycode
var time = new Date().getTime(); //获取时间
/* 1.login */
$.ajax({ //返回其创建的 XMLHttpRequest 对象
type: 'GET', //String
url: 'http://....com/api' + '/loginPage?time=' + time, //String，当页发送请求的地址
data: {
lockKeyGroupRandCode: keycode,
page: 1,
limit: 50
},
xhrFields: { //跨域请求是不会发送cookie等用户认证凭据的,∴再次访问远程api的时候，cookie是不会被带上的。∴用XMLHttpRequest请求的时候，要写这条
withCredentials: true
},
crossDomain: true, //false表示同一域请求，true表示跨域请求。它可以使服务器端重定向到另外一个域。
dataType: 'json', //预期服务器返回的数据类型
contentType: 'application/json;charset=utf-8',
success: function(response) { //ajax将会把ajax请求获取倒的内容指定给response这个变量
console.log(response);
if (data.code == 0) { //返回一个包含HTTP状态码的信息头，判断是不是true
} else {
mui.alert(data.msg)
}
},
error: function() {
mui.alert('加载失败')
}
});

网上模板

$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
success: function(data){
$('#resText').empty();
//清空resText里面的所有内容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});
$('#resText').html(html);
}
});
});
})

果然还是要遍历出data，最后得到3个而不是6个。=>$.each / eachli.each(function (i) 还是需要的。