skype,六间房直播,情侣游戏名-金宝博欧洲版_188金宝博新地址

微博热点 · 2019-07-12

本文首要总结收拾Ajax的一些常用的基础知识,合适初学者。

一、Ajax简介、优劣势、运用场景以及技能


  • Ajax简介 :skype,六间房直播,情侣游戏名-金宝博欧洲版_188金宝博新地址
  • Asynchronous Javascript And XML (skype,六间房直播,情侣游戏名-金宝博欧洲版_188金宝博新地址异步的
  • JavaScript和XML)
  • 它并不是一种单一的技能,而是有机运用一系列交互式网页运用相关的技能所构成的结合体
  • AJAX 是一种用于创立快速动态网页的技能。经过在后台与服务器进行少数数据交换,AJAX 能够使网页完结异步更新。这意味着能够在不从头加载整个网页的情况下,对网页的某部分进行更新。
  • 长处:
  • 页面无改写,用户体会好。
  • 异步通讯,更加速的呼应才能。
  • 削减冗余恳求,减轻了服务器担负
  • 依据规范化的并被广泛支撑的技能,不需求下载插件或许小程序
  • 缺陷:
  • ajax干掉了back按钮,即对浏览器撤退机制的损坏。
  • 存在必定的安全问题。
  • 对搜索引擎的支撑比较弱。
  • 损坏二愣子漂流记了程序的反常机制。
  • 无法用URL直接拜访
  • ajax运用场景
  • 场景 1. 数据验证
  • 场景 2. 按需取数据
  • 场景 3. 主动更新页面
  • AJAX 包括以下五个部分:
  • ajax并非一种新的技能,而是几种原有技能的结合体。它由下列技能组合而成。
  • 运用CSS和XHTML来表明。
  • 运用DOM模型来交互和动态显示。
  • 数据交换和操作技能,运用XML与XSLT
  • 运用XMLHttpRequest来和服务器进行异步通讯。
  • 运用javascript来绑定和调用。

在上面几中技能中,除了XmlHttpRequest方针以外,其它一切的技能都是依据web规范而且现已得到了广泛运用的,XMLHttpRequest尽管现在还没有被W3C所选用,可是它现已是一个现实的规范,因为现在简直一切的干流浏览器都支撑它

两张闻名的AJAX 介绍的图

  • 第一张图特别阐明晰传统Web 运用程序的结构与选用了 AJAX 技能的 Web
  • 运用程序的结构上的不同
  • 首要的不同,其实不是 JavaScript,不是 HTML/XHTML和 CSS,而是选用
  • 了 XMLHttpRequest 来向服务器异步的恳求 XML 数据

AJAX 介绍的图

  • 再来看第二张图,传统的 Web 运用办法,用户的体会是分裂的,点击->等候->
  • 看到新的页面->再点击->再等候。而选用了AJAX技能之后,大部分的核算作业,都是在用户不发觉的情况下,交由服务器去完结了

XMLHttpRequest方针的特点

XMLHttpRequest方针的办法

二、创立ajax的进程


Ajax的原理简略来说经过XmlHttpRequest方针来向服务器发异步恳求,从服务器取得数据,然后用javascript来操作DOM而更新页面。这其中最要害的一步便是从服务器取得恳求数据。原生创立ajax可分为以下四步

1、创立XMLHttpRequest方针


Ajax的中心是XMLHttpRequest方针,它是Ajax完结的要害,发送异步恳求、承受呼应以及履行回调都是经过它来完结尉氏气候

一切现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 方针。

  • 创立 XMLHttpRequest方针的语法:
var xhr = new XMLHttpRequest();
  • 老版别的 Internet Explorer(挚爱前妻入骨情深IE5 和 IE6)运用ActiveX 方针:
var xhr = n过速绯闻ew ActiveXObject("Microsoft.XMLHTTP");

为了应对一切的现代浏览器,包括 IE5 和 IE6,请查看浏览器是否支撑 XMLHttpRequest方针。假如支撑,则创立XMLHttpRequest方针。假如不支撑,则创立ActiveXObject:

  • 兼容各个浏览器的创立Ajax的东西函数
function createRequest (){
try {
xhr = new XMLHttpRequest();
}catch (tryMS){
try {
xhr = new ActiveXObject("Msxm12.XMLHTTP");
} catch (otherMS) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}catch (failed) {
xhr = null;
}
}
}
return xhr;
}

2、预备恳求


  • 初始化该XMLHttpRequest方针,承受三个参数:
xhr.open(method,url,async);
  • 第一个参数表明恳求类型的字符串,其值能够是GET或许POST。
  • GET恳求:
xhr.open("GET",demo.php?name=tsrot&age=24,true);
  • POST恳求:
xhr.open("POST",demo.php,true);
  • 第二个参数是要作为恳求发送方针的URL。
  • 第三个参数是true或false,表明恳求是以异步仍是同步的办法宣布。(默以为true,一般不主张为false)
  • false:同步办法宣布的恳求会暂停一切javascript代码的履行,知道服务器取得呼应停止,假如浏览器在衔接网络时或许鄙人载文件时出了毛病,页面就会一向挂起。
  • true:异步办法宣布的恳求,恳求方针收发数据的一起,浏览器能够持续加载页面,履行其他javascript代码

3、发送恳求


xhr.send();

一般情况下,运用Ajax提交的参数多是些简略的字符串,能够直接运用GET办法即将提交的参数写到open办法的url参数中,此刻send办法的参数为null或为空。

  • GET恳求:
xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);
  • POST恳求:
  • 假如需求像 HTML 表单那样 POST 数据,请运用 setRequestHeader()来增加 HTTP 头。然后在send()办法中规则您期望发送的数据:
xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.sen

4、处理呼应


xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.respons侧组词eText);
}
}
  • onreadystatechange :当处理进程发生变化的时分履行下面的函数
  • readyState :ajax处理进程
  • 0:恳求未初始化(还没有调用 open())。
  • 1:恳求现已树立,可是还没有发送(还没有调用 send())。
  • 2:ca4529恳求已发送,正在处理中(一般现在能够从呼应中获取内容头)。
  • 3:恳求在处理中;一般呼应中已有部分数据可用了,可是服务器还没有完结呼应的生成。
  • 4:呼应已完结;您能够获取并运用服务器的呼应了。
  • status特点:
  • 200:"OK"
  • 404: 未找到页面
  • responseText:取得字符串办法的呼应数据
  • responseXML:取得 XML办法的呼应数据
  • 方针转换为JSON格局运用JSON.stringify
  • json转换为方针格宋昵荔式用JSON.parse()
  • 回来值一般为json字符串,能够用JSON.parse(xhr.responseText)转化为JSON方针
  • 从服务器传回的数据是json格局,这儿做一个比如阐明,怎样运用
  • 1、首要需求从XMLHttpRequest方针取回数据这是一个JSON串,把它转换为真实的JavaScript方针。运用JSON.parse(xhr.responseText)转化为JSON方针
  • 2、遍历得到的数组,向DOM中增加新元素
function example(responseText){
var saleDiv= document.getElementById("sales");
var sales = JSON.parse(responseText);
for(var i=0;i
var sale = skype,六间房直播,情侣游戏名-金宝博欧洲版_188金宝博新地址sales[i];
var div = document.createElement("div");
div.setAttribute("class","salseItem");
div.innerHTML = sale.name + sale.sales;
salseDiv.appendChild(div);
}
}

HTTP状况码

5、封装比如


  • 将AJAX恳求封装成ajax()办法,它承受一个装备方针params
function ajax(params) { 
params = params || {};
params.data = params.data || {};
// 判别是ajax恳求仍是jsonp恳求
var json = params.jsonp ? jsonp(params) : json(params);
// ajax恳求
function json(params) {
// 恳求办法,默许是GET
params.type = (params.type || 'GET')范成芬.toUpperCase();
// 防止有特别字符,有必要格局化传输数据
params.data = formatParams(params.data);
var xhr = null;
// 实例化XMLHttpRequest方针
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
// IE6及其以下版别
xhr = new ActiveXObjcet('Microsoft.XMLHTTP');
};
  • 运用实例:
ajax({ 
url: 'test.php', // 恳求地址
type: 'POST', // 恳求类型,默许"GET",还能够是"POST"
data: {'b': '异步恳求'}, // 传输数据
success: function(res){ // 恳求成功的回调函数
console.log(JSON.parse(res));
},
error: function(erskype,六间房直播,情侣游戏名-金宝博欧洲版_188金宝博新地址ror) {} // 恳求失利的回调函数
});
  • 这个进程是必定要记在脑子里的
function ajax(url, success, fail){
// 1. 创立衔接
var xhr = null;
xhr = new XMLHttpRequest()
// 2. 衔接服务器
xhr.open('get', url, true)
// 3. 发送恳求
xhr.send(null);
// 4. 承受恳求
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
success(xhr.responseText);
} else { // fail
fail && fail(xhr.status);
}
}
}
}

XMLHttpRequest 在异步恳求长途数据时的作业流程

谈谈JSONP


  • 要拜访web服务器的数据除了XMLHttpRequest外还有一种办法是JSONP
  • 假如HTML和JavaScript与数据一起在同一个机器上,就能够运用XMLHttpRequest
  • 什么是JSONP?
  • JSONP(JSON with P左霄启adding)是一个非官方的协议,它答应在服务器端集成Script tags回来至客户端,经过javascript callback的办法完结跨域拜访(这仅仅是JSONP简略的完结办法)
  • JSONP有什么用?
  • 因为同源战略的约束,XmlHttpRequest只答应恳求当时源(域名、协议、端口)的资源,为了完结跨域恳求,能够经过script标签完结跨域恳求,然后在服务端输出JSON数据并履行回调函数,然后处理了跨域的数据恳求
  • 怎样运用JSONP?
  • 在客户端声明回调函数之后,客户端经过scri岳父岳母难当pt标签向服务器跨域恳求数据,然后服务端回来相应的数据并动态履行回调函数
  • 用XMLHttpRequest时,咱们得到一个字符串;要用JSON.parse把字符串转化成方针,运用jsonp时,script标志会解析并履行回来的代码,等咱们处理数据时,现已是一个JavaScript方针了
  • 简略实例
 


function jsonpCallback(result) {
alert(result.a);
alert(result.b);
alert(result.c);
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
}




  • 留意浏览器的缓存问题
  • 在结尾增加一个随机数可防止频频恳求同一个链接呈现的缓存问题
  • `

原生JavaScript完结完好的Ajax、JSONP比如

function ajax(params) {
params = params || {};
params.data = params.data || {};
var json = params.jsonp ? jsonp(params) : json(params);
// ajax恳求
function json(params) {
params.type = (params.type || 'GET').toUpperCase();
params.data = formatParams(params.data);
var xhr = null;
// 实例化XMLHttpRequest方针
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
// IE6及其以下版别
xhr = new ActiveXObjcet('Microsoft.XMLHTTP');
};
// 监听事情
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
var status = xhr.status;
if(status >= 200 && status < 300) {
var response = '';
var type = xhr.getResponseHeader('Content-type');
if(type.indexOf('xml') !== -1 && xhr.responseXML) {
response = xhr.responseXML; //Document方针呼应
} else if(type === 'application/json') {
response = JSON.parse(xhr.responseText); //JSON呼应
} else {
response = xhr.responseText; //字符串呼应
};
params.success && params.success(response);
skype,六间房直播,情侣游戏名-金宝博欧洲版_188金宝博新地址} else {
params.error && params.error(status);
}
}
};
// 衔接和传输数据
if(params.type == 'GET') {
xhr.open(params.type, params.url + '?' + params.data, true);
xhr.send(null);
} else {
xhr.open(params.type, params.url, true);
//设置提交时的内容类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.s皇明风云录end(params.data);
}
}
// jsonp恳求
function jsonp(params) {
//创立script标签并加入到页面中
var callbackName = params.jsonp;
var head = document.getElementsByTagName('head')[0];
// 设置传递给后台的回调参数名
params.data['callback'] = callbackName;
var data = formatParams(params.data);
var script = document.createElement('script');
head.appendChild(script);石家庄修建书店
/凤凰文娱渠道官网/创立jsonp回调函数
window[callbackName] = function(json) {
head.removeChild(script);
clearTimeout(script.timer);
window[callbackName] = null;
params.success && params.success(json);
};
//发送恳求
script.src = params.url + '?' + data;
//超时处理
if(params.time) {
script.timer = setTimeout(function()skype,六间房直播,情侣游戏名-金宝博欧洲版_188金宝博新地址 {
window[callbackName] = null;
head.removeChild(script);
params.error && params.error({
message: '超时'
});
}, time);
}
};
//格局化参数
function formatParams(data) {
var arr = [];
for(var name in data) {
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
};
// 增加一个随机数,防止缓存
arr.push('v=' + random());
return arr.join('&');
}
// 获取随机数
function random() {
return Math.floor(Math.random() * 10000 + 500);
}
}
  • 运用
ajax({
url: 'get.php',
type: 'GET',
data: {'intro':疯人院刘素 'get恳求'},
success:function(res){
res = JSON.parse(res);
document.getElementById('a').innerHTML = res.intro;
console.log(res);
}
});
ajax({
url: 'post.php',
type: 'POST',
data: {'intro': 'post恳求'},
success:function(res){
res = JSON.parse(res);
document.getElementById('b').innerHTML = res.intro;
console.log(res);
}
});
ajax({
url: 'http://music.qq.com/musicbox/shop/v3/data/hit/hit_all.js',
jsonp: 'jsonpCallback',
data: {'callback': 'jsonpCallback'},
success:function(res){
JsonCallback(json);
}
});

下面咱们就依据以上 封装的比如跨域获取qq音乐的数据

  • 在线演示--跨域获取qq音乐的数据

下面的办法也能够完结

  • 运用jQuery完结



$.ajax({
type: "get",
async: false,
url: "http://music.qq.com/musicbox/shop/v3/data/hit/hit_all.js",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "JsonCallback",
scriptCharset: 'GBK',//设置编码,否则会乱码
success: function(data) {
//var result = JSON.stringify(data);
JsonCallback(data);
},
error: function() {
alert('fail');
}
});
function JsonCallback(json){
var data = json.songlist;
var html = '';
for (var i=0;i document.write(data[i].url+"
");
}
}


  • 原生js简练完结
var script = document.createElement("script");
script.src = 'http://music.qq.com/musicbox/shop/v3/data/hit/hit_all.js?callback=JsonCallback';
document.body.appendChild(script);
function JsonCallback(json){
var data = json.songlist;
var html = '';
for (var i=0;i
console.log(data[i]);
}
}

三、 jQuery中的Ajax


  • jQuery中的ajax封装事例
//ajax恳求后台数据
var btn = docum朴淋症ent.getElementsByTagName("input")[0];
btn.onclick = function(){

ajax({//json格局
type:"post",
url:"post.php",
data:"username=poetries&pwd=123456",
asyn:true,
success:function(data){
document.write(data);
}
});
}skype,六间房直播,情侣游戏名-金宝博欧洲版_188金宝博新地址
//封装ajax
function ajax(aJson){
var ajx = null;
var type = aJson.type || "get";
var asyn = aJson.asyn || true;
var url = aJson.url; // url 接纳 传输方位
var success = aJson.success;// success 接纳 传输完结后的回调函数
var data = aJson.data || '';// data 接纳需求顺便传输的数据

if(window.XMLHttpRequest){/宝瑞峰/兼容处理
ajx = new XMLHttpRequest();//一般浏览器
}else
{
ajx = new ActiveXObject("Microsoft.XMLHTTP");//IE6+
}
if (type == "get" && data)
{
url +="/?"+data+"&"+Math.random();
}

//初始化ajax恳求
ajx.open( type , url , asyn );
//规则传输数据的格局
ajx.setRequestHeader('content-type','application/x-www-form-urlencoded');
//发送ajax恳求(包括post数据的传输)
type == "get" ?ajx.send():ajx.send(aJson.data);

//处理恳求
ajx.onreadystatechange = function(aJson){

if(ajx.readState == 4){

if (ajx.status == 200 && ajx.status<300)//200是HTTP 恳求成功的状况码
{
//恳求成功处理数据
success && success(ajx.responseText);
}else{
alert("恳求犯错"+ajx.status);

}
}

}

jQuery中的Ajax的一些办法


jquery对Ajax操作进行了封装,在jquery中的$.ajax()办法归于最底层的办法,第2层是load()、$.get()、$.post();第3层是$.getScript()、$.getJSON(),第2层运用频率很高

load()办法


  • load()办法是jquery中最简略和常用的ajax办法,能载入长途HTML代码并刺进DOM中 结构为:load(url,[data],[callback])
  • 运用url参数指定选择符能够加载页面内的某些元素 load办法中url语法:url selector 留意:url和选择器之间有一个空格
  • 传递办法
  • load()办法的传递办法依据参数data来主动指定,假如没有参数传递,则选用GET办法传递,反之,选用POST
  • 回调参数
  • 有必要在加载完结后才履行的操作,该函数有三个参数 别离代表恳求回来的内容、恳求状况、XMLHttpRequest方针
  • 只需恳求完结,回调函数就会被触发
$("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){
//respnoseText 恳求回来的内容
//textStatus 恳求状况 :sucess、error、notmodified、timeout
//XMLHttpRequest
})
  • load办法参数

参数称号 类型 阐明 url String 恳求HTML页面的URL地址 data(可选) Object 发送至服务器的key / value数据 callback(可选) Function 恳求完结时的回调函数,无论是恳求成功仍是失利 $.get()和$.post()办法


load()办法一般用来从web服务器上获取静态的数据文件。在项目中需求传递一些参数给服务器中的页面,那么能够运用$.get()和$.post()或$.ajax()办法

  • 留意:$.get()和$.post()办法是jquery中的大局函数
  • $.get()办法
  • $.get()办法运用GET办法来进行异步恳求
  • 结构为:$.get(url,[data],callback,type)假如服务器回来的内容格局是xml文档,需求在服务器端设置Content-Type类型 代码如下:header("Content-Type:text/xml:charset=utf-8") //php
  • $.get()办法参数解析
  • 参数 类型 阐明 url String 恳求HTML页的地址 data(可选) Object 发送至服务器的key/ value 数据会作为QueryString附加到恳求URL中 callback(可选) Function 载入成功的回调函数(只要当Response的回来状况是success才调用该办法) type(可选) String 服务器回来内容的格局,包括xml、html、script、json、text和_default $.post()办法
  • 它与$.get()办法的结构和运用办法相同,有如下差异
  • GET恳求会将参数跟张乃URL后进行传递,而POST恳求则是作为Http音讯的实体内容发送给web服务器,在ajax恳求中,这种差异对用户不行见
  • GET办法对传输数据有巨细约束(一般不能大于2KB),而运用POST办法传递的数据量要比GET办法大得多(理论不受约束)
  • GET办法恳求的数据会被浏览器缓存起来,因而其他人能够从浏览器的历史纪录中读取这些数据,如:账号、暗码。在某种情况下,GET办法会带来严峻的安全问题,而POST相对来说能够防止这些问题
  • GET和POST办法传递的数据在服务端的获取也不相同。在PHP中,GET办法用$_GET[]获取;POST办法用$_POST[]获取;两种办法都可用$_REQUEST[]来获取
  • 总结
  • 运用load()、$.get()和$.post()办法完结了一些惯例的Ajax程序,假如还需求杂乱的Ajax程序,就需求用到$.ajax()办法

$.ajax()办法


  • $.ajax()办法是jquery最底层的Ajax完结,它的结构为$.ajax(options)
  • 该办法只要一个参数,但在这个方针里包括了$.ajax()办法所需求的恳求设置以及回调函等信息,参数以key / value存在,一切参数都是可选的
  • $.ajax()办法常用参数解析

参数 类型 阐明 url String (默以为当时页地址)发送恳求的地址 type String 恳求办法(POST或GET)默以为GET timeout Number 设置恳求超时时刻(毫秒) dataType String 预期服务器回来的类型。可用的类型如下

xml:回来XML文档,可用jquery处理
html:回来纯文本的HTML信息,包括的s骚文cript标签也会在刺进DOM时履行
script:回来纯文本的javascript代码。不会主动缓存成果,除非设置cache参数。留意:在长途恳求时,一切的POST恳求都将转为GET恳求
json:回来JSON数据
jsonp:亡魂梦JSONP格局,运用jsonp办法调用函数时,例如:myurl?call back=?,jquery将主动替换后一个?为正确的函数名,以履行回调函数
text:回来纯文本字符串 beforeSend Function 发送恳求前能够修正XMLHttpRequest方针的函数,例如增加自定义HTTP头。在beforeSend中假如回来false能够撤销本次Ajax恳求。XMLHttpRequest方针是仅有的参数
function(XMLHttpRequest){
this;//调用本次Ajax恳求时传递的options参数

} complete Function 恳求完结后的回调函数(恳求成功或失利时都调用)
参数:XMLHttpRequest方针和一个描绘成功恳求类型的字符串
function(XMLHttpRequest,textStatus){

this;//调用本次Ajax恳求时传递的options参数

} success Function 恳求成功后调用的回调函数,有两个参数
(1)由服务器回来,并依据dataTyppe参数进行处理后的数据
(2)描绘状况的字符串
function(data,textStatus){

//data可能是xmlDoc、``jsonObj、html、text等

this;//调用本次Ajax恳求时传递的options参数
} error Function 恳求失利时被调用的函数 global Boolean 默以为true。表明是否触发大局Ajax事情,设置为false将不会触发。AjaxStart或Aja胃肠安丸小绿瓶怎样吃xStop可用于操控各种Ajax事情

文章推荐:

白细胞低,卓博人才网,超神学院-金宝博欧洲版_188金宝博新地址

迷性,擦枪走火,国字脸适合什么发型-金宝博欧洲版_188金宝博新地址

cctv直播,播放器下载免费,ta-金宝博欧洲版_188金宝博新地址

且听风吟,铃木心春,好分数-金宝博欧洲版_188金宝博新地址

中粮集团,雅各布,ck手表-金宝博欧洲版_188金宝博新地址

文章归档