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回调事件：
"en">
"UTF-8">
"en">
"UTF-8">
复制代码.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);
})
复制代码
"UTF-8">
AJAX基础回顾