Web前端-Ajax基础技术(下)
你要明白ajax是什么，怎么使用？
ajax，web程序是将信息放入公共的服务器，让所有网络用户可以通过浏览器进行访问。
浏览器发送请求，获取服务器的数据：
地址栏输入地址，表单提交，特定的href或src属性。
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'test.php');
xhr.send()
xhr.onreadystatechange = function() {
if(this.readyState != 4) return
var res = JSON.parse(this.responseText);
// res 服务器返回的数据
var data = res.data;
for(var i = 0; i<data.length; i++){
}
}
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方法的第一个参数作用, 设置请求的method
xhr.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
<script src="template-web.js" >
</script>
// 封装
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);
}
回调：
<script>
function foo() {
setTimeout(function(){
return Date.now();
}, 1000);
}
var time = foo()
</script>
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(){
}
}
<script src="jquery.js"></script>
<script>
$.ajax('./time.php', {
type: 'post', // method 请求方法
success: function(res) {
console.log(res);
}
}
</script>
$.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回调事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="jquery.js"></script>
<script>
$.ajax({
url: 'time.php',
type: 'get',
beforeSend: function(xhr) {
console.log('beforeSend', xhr);
},
success: function(res) {
console.log(res);
},
error: function(xhr) {
console.log(xhr);
},
complete: function(xhr) {
console.log(xhr);
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="jquery.js"></script>
<script>
var xhr = new XMLHttpRequest();
xhr.open('get','time.php');
xhr.send()
xhr.onreadystatechange = function() {
if(this.readyState != 4) return
console.log(this.responseText);
}
</script>
</body>
</html>
<script src="jquery.js"></script>
<script>
$.get('time.php', function(res){
console.log(res);
})
$.get('time.php', { id: 1 }, function(res) {
console.log(res);
})
$.post('time.php', { id: 1 }, function(res) {
console.log(res);
})
</script>
.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);
})
<!DOCTYPE html>
<head>
<meta charset = "UTF-8">
<title>AJAX基础回顾</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'test.php');
xhr.responseType='json';
xhr.onreadystatechange = function() {
if(this.readyState !== 4) return
console.log(this.response);
}
</script>
</body>
</html>
$.get('http://...', function(res){
console.log(res);
})
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<meta http-equiv="Content-Language" content="zh-cn"/>
<meta name="robots" content="all"/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
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);
}
})
结言
好了，欢迎在留言区留言，与大家分享你的经验和心得。
感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。
作者简介
达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。
