資訊專欄INFORMATION COLUMN
摘要：前端基礎(chǔ)技術(shù)下你要明白是什么，怎么使用，程序是將信息放入公共的服務(wù)器，讓所有網(wǎng)絡(luò)用戶可以通過瀏覽器進(jìn)行訪問。獲取字符串形式的響應(yīng)數(shù)據(jù)，獲取形式的響應(yīng)數(shù)據(jù)。基礎(chǔ)回顧原理是借助標(biāo)簽發(fā)送跨域請求的技巧。
Web前端-Ajax基礎(chǔ)技術(shù)(下)
你要明白ajax是什么，怎么使用？
ajax，web程序是將信息放入公共的服務(wù)器，讓所有網(wǎng)絡(luò)用戶可以通過瀏覽器進(jìn)行訪問。
瀏覽器發(fā)送請求，獲取服務(wù)器的數(shù)據(jù)：
地址欄輸入地址，表單提交，特定的href或src屬性。
// 封裝
function ajax(method, url, params) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
params = params || null;
xhr.send(params);
xhr.onreadystatechange=function(){
if(this.readyState != 4) return
console.log(this.responseText);
}
}
ajax("GET", "time.php", "key=value");
function ajax(method, url, params) {
var xhr = new XMLHttpRequest();
if(method === "GET"){
url += "?" + params;
}
xhr.open(method, url);
var data = null;
if(method === "POST") {
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
data = params
}
xhr.send(data);
xhr.onreadystatechange=function(){
if(this.readyState != 4) return
console.log(this.responseText);
}
}// 傳對象
function ajax(method, url, params) {
var xhr = new XMLHttpRequest();
if(typeof params === "object"){
var tempArr = [];
for(var key in params){
var value = params[key];
tempArr.push(key + "=" + value);
}
params = tempArr.join("&");
}
if(method === "GET"){
url += "?" + params;
}
xhr.open(method, url);
var data = null;
if(method === "POST") {
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
data = params
}
xhr.send(data);
xhr.onreadystatechange=function(){
if(this.readyState != 4) return
console.log(this.responseText);
}
}function ajax(method, url, params, done) {
method = method.toUpperCase();
var xhr = new XMLHttpRequest();
if(typeof params === "object"){
var tempArr = [];
for(var key in params){
var value = params[key];
tempArr.push(key + "=" + value);
}
params = tempArr.join("&");
}
if(method === "GET"){
url += "?" + params;
}
xhr.open(method, url, false);
var data = null;
if(method === "POST") {
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
data = params
}
xhr.onreadystatechange=function(){
if(this.readyState != 4) return
// console.log(this.responseText);
done(this.responseText);
}
xhr.send(data);
}
var ondone = function(res) {
console.log(res);
}回調(diào)：
jquery中的ajax。
https://www.jquery123.com/category/ajax/function ajax(method, url, params, done) {
// 統(tǒng)一轉(zhuǎn)換大寫
method = method.toUpperCase();
// urlencoded
var pairs = [];
for(var key in params) {
pairs.push(key+"="+params[key]);
}
var querystring = pairs.join("&");
var xhr = window.XMLHttpRequest?new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr.addEventListener("readystatechange",function(){
}
}
$.ajax({
url: "time.php",
type: "post",
data: { id: 1, name: "張三" },
success: function(res) {
console.log(res);
}
})$.ajax({
url: "json.php",
type: "get",
dataType: "json",
success: function(res) {
console.log(res)
}
})ajax回調(diào)事件：
.ajaxComplete()
當(dāng)ajax請求完成后注冊一個回調(diào)函數(shù)
.ajaxError()
ajax請求出錯
.ajaxSend()
ajax請求發(fā)送之前綁定一個要執(zhí)行的函數(shù)
.ajaxStart()
在ajax請求剛開始時執(zhí)行一個處理函數(shù)
.ajaxStop()
在ajax請求完成時執(zhí)行一個處理函數(shù)
.ajaxSuccess()
綁定一個函數(shù)當(dāng)ajax請求成功完成時執(zhí)行
jQuery.ajax()
執(zhí)行一個異步的http(ajax)請求
jQuery.ajaxPerfilter()
在每個請求之前被發(fā)送和$.ajax()處理它們前處理
jQuery.ajaxSetup()
為以后要用到的ajax請求設(shè)置默認(rèn)的值
jQuery.ajaxTransport()
創(chuàng)建一個對象
jQuery.get()
使用一個http get請求從服務(wù)器加載數(shù)據(jù)
jQuery.getJSON（）
jQuery.getScript()
GET請求從服務(wù)器加載并執(zhí)行一個 JavaScript 文件
jQuery.post() 請求從服務(wù)器加載數(shù)據(jù)跨域：
同源，域名，協(xié)議，端口，完全相同，同源的相互通過ajax的方式進(jìn)行請求。
不同源地址之間，不能相互發(fā)送ajax請求。
$.get("http://", function(res) {
console.log(res);
})
AJAX基礎(chǔ)回顧