Web前端-Ajax基础技术(下)
你要明白ajax是什么，怎么使用？
ajax，web程序是将信息放入公共的服务器，让所有网络用户可以通过浏览器进行访问。
浏览器发送请求，获取服务器的数据：
地址栏输入地址，表单提交，特定的href或src属性。
ajax上手：
// 创建一个XMLHttpRequest类型的对象var xhr = new XMLHttpRequest();// 打开一个网址的连接xhr.open('GET', './time.php');// 发送一次请求xhr.send(null);// 处理网页呈现后的操作xhr.onreadystatechange = function() { if(this.readyState === 4) { console.log(this); }}复制代码 readyState
0 xhr被创建，未调用open()方法1 open()方法被调用，建立了连接2 send()方法被调用，可以获取状态行和响应头3 响应体下载中，responseTest属性可能已经包含部分数据4 响应体下载完成，直接使用responseText复制代码
http请求：
// 设置请求报文的请求行xhr.open('GET', './time.php');// 设置请求头xhr.setRequestHeader('Accept', 'text/plain');// 设置请求体xhr.send(null);xhr.onreadystatechange = function() { if(this.readyState === 4) { // 获取响应状态码 console.log(this.status); // 获取响应状态描述 console.log(this.statusText); // 获取响应头信息 console.log(this.getResponseHeader('Content-Type')); // 指定响应头 console.log(this.getAllResponeseHeaders()); // 全部响应头 // 获取响应体 console.log(this.responseText) // 文本形式 console.log(this.responseXML) // xml }}复制代码 post请求：
var xhr = new XMLHttpRequest();// open方法的第一个参数作用, 设置请求的methodxhr.open('POST', './add.php');// 设置请求体格式xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.send('key=value');xhr.onreadystatechange = function() { if(this.readyState === 4) { console.log(this.responseText); }}复制代码 异步同步：
// 异步console.log('before ajax');var xhr = new XMLHttpRequest();xhr.open('GET', './time.php', true);xhr.send(null);xhr.onreadystatechange = function() { if(this.readyState === 4){ console.log('request done'); }}console.log('after ajax');// 同步console.log('before ajax');var xhr = new XMLHttpRequest();xhr.open('GET', './time.php', false);xhr.send(null);xhr.onreadystatechange = function() { if(this.readyState === 4){ console.log('request done'); }}xhr.send(null);console.log('after ajax');复制代码 响应类型：
var xhr = new XMLHttpRequest();xhr.open('GET', 'test.php');xhr.send();// 请求代理对象，响应类型xhr.responseType = 'json';xhr.onreadystatechange = function() { if(this.readyState != 4) return; console.log(this);}复制代码 服务器响应，使用 XMLHttpRequest 对象的responseText或responseXML属性。
responseText获取字符串形式的响应数据，responseXML获取xml形式的响应数据。
responseText
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;复制代码 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');复制代码 模板引擎：
artTemplate: https://aui.github.io/art-template/复制代码
art-template是一个简约，超快的模板引擎，采用作用域声明的技术来优化模板渲染速度。
安装：
npm install art-template --save复制代码
下载：
lib/template-web.js复制代码
复制代码
// 封装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);})复制代码 AJAX基础回顾 复制代码
$.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); }})复制代码 结言
好了，欢迎在留言区留言，与大家分享你的经验和心得。
感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。
作者简介
达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。