专栏首页达达前端Web前端-Ajax基础技术(下)

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

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

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

你要明白ajax是什么,怎么使用?

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

浏览器发送请求,获取服务器的数据:

地址栏输入地址,表单提交,特定的hrefsrc属性。

<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 对象的responseTextresponseXML属性。

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);
 }
})

结言

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

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

作者简介

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Web前端-Ajax基础技术(上)

    ajax是浏览器提供一套的api,用于向服务器发出请求,接受服务端返回的响应,通过javascript调用,实现通过代码控制请求与响应,实现网络编程。

    达达前端
  • ES6基础-ES6的扩展

    编辑器(VS Code, Atom,Sublime)或者IDE(Webstorm)

    达达前端
  • 【微信小程序】如何获取用户绑定手机号

    达达前端
  • 你真的会使用XMLHttpRequest吗?

    我们通常将Ajax等同于XMLHttpRequest,但细究起来它们两个是属于不同维度的2个概念。

    用户2458785
  • XMLHttpRequest使用指南大全

    我们通常将Ajax等同于XMLHttpRequest,但细究起来它们两个是属于不同维度的2个概念。

    空空云
  • Ajax笔记

    本文主要是我学习ajax的笔记,不涉及到原理,只是记录如何使用。如果有错欢迎各位大佬指出。提前先转一篇写的非常全面的博客你真的会使用XMLHttpRequest...

    bamboo
  • 第110天:Ajax原生js封装函数

    半指温柔乐
  • Ajax

    1、XMLHttpRequest对象 各浏览器(包括ie7+)都支持原生的XHR对象,在这些浏览器中创建XHR对象可以:

    Ewall
  • 《大胖 • 小课》- 玩玩多文件配多进度上传

    这是《大胖小课》栏目的专题一《说说文件上传那些事儿》的第4节-《玩玩多文件配多进度上传》

    zz_jesse
  • 原生AJAX请求教程

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用。本质是在 HTTP 协议的...

    老马

扫码关注云+社区

领取腾讯云代金券