Web前端-Ajax基础技术(下)

摘要：前端基础技术下你要明白是什么，怎么使用，程序是将信息放入公共的服务器，让所有网络用户可以通过浏览器进行访问。获取字符串形式的响应数据，获取形式的响应数据。基础回顾原理是借助标签发送跨域请求的技巧。

Web前端-Ajax基础技术(下)

你要明白ajax是什么，怎么使用？

ajax，web程序是将信息放入公共的服务器，让所有网络用户可以通过浏览器进行访问。

浏览器发送请求，获取服务器的数据：

地址栏输入地址，表单提交，特定的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);
}

回调：

jquery中的ajax。

https://www.jquery123.com/category/ajax/

function ajax(method, url, params, done) {
// 统一转换大写
 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回调事件：

.ajaxComplete()
当ajax请求完成后注册一个回调函数
.ajaxError()
ajax请求出错
.ajaxSend()
ajax请求发送之前绑定一个要执行的函数
.ajaxStart()
在ajax请求刚开始时执行一个处理函数
.ajaxStop()
在ajax请求完成时执行一个处理函数
.ajaxSuccess()
绑定一个函数当ajax请求成功完成时执行
jQuery.ajax()
执行一个异步的http(ajax)请求
jQuery.ajaxPerfilter()
在每个请求之前被发送和$.ajax()处理它们前处理
jQuery.ajaxSetup()
为以后要用到的ajax请求设置默认的值
jQuery.ajaxTransport()
创建一个对象
jQuery.get()
使用一个http get请求从服务器加载数据
jQuery.getJSON（）
jQuery.getScript()
GET请求从服务器加载并执行一个 JavaScript 文件
jQuery.post() 请求从服务器加载数据

跨域：
同源，域名，协议，端口，完全相同，同源的相互通过ajax的方式进行请求。
不同源地址之间，不能相互发送ajax请求。

$.get("http://", function(res) {
 console.log(res);
})

$.get("http://...", function(res){
 console.log(res);
})

var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "http//...";
document.body.appendChild(link);

var script = document.createElement("script");
script.src = "http://...";
document.body.appendChild(script);

jsonp原理：
json是借助script标签发送跨域请求的技巧。
原理是在客户端借助script标签请求服务端的一个动态网页，服务端的这个动态网页返回一段带有函数调用的javascript全局函数调用的脚本，将原本需要返回给客户端的数据传递进去。

$.ajax({
 url: "http://...",
 dataType: "json",
 success: function(res) {
  console.log(res);
 }
})

结言

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

作者简介

达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。