神馬是Ajax
通過在后臺與服務器進行少量數(shù)據交換屠阻,AJAX可以使網頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網頁的情況下吧恃,對網頁的某部分進行更新麻诀。
封裝原生ajax函數(shù)
type:傳值方式get post。
http://www.cnblogs.com/zhangpengshou/archive/2012/07/09/2583096.htmlRect機制
uri:要訪問的服務器的地址
async:同步異步請求默認為異步操作若為同步操作呻率,訪問數(shù)據的時候呻引,頁面無法進行任何操作,呈現(xiàn)出一種假死狀態(tài)藐守;同步操作是相對安全的
obj:(相當于jq中的data屬性
angular params:{}//get方式
data:{}//post)傳遞一個json對象進去(后端規(guī)定傳遞的數(shù)據:傳遞給后端的值)
fun:回調函數(shù)有返回數(shù)據時進行的操作
function ajax(type,url,async,obj,fun){
var str = "";
/*循環(huán)遍歷傳進來的json對象(遍歷json都是用for in循環(huán)key代表后端規(guī)定傳遞的數(shù)據卢厂,obj[key]代表傳遞給后端的值)*/
for(var key in obj){
str += key + '=' + obj[key]+'&';
//拼接成類似uname=’admin’&upass=’123456’&
}
if(str!=""&&type=='get'){
//uname=’admin’&upass=’123456’&結尾處多了個&去掉它
url+="?"+str.substring(0,str.length-1);
//如果是get方式發(fā)送一個空的字符串慎恒,send(str)
str='';
}
var xhr;
//兼容ie低版本7以下
if(*window*.XMLHttpRequest){
xhr=newXMLHttpRequest();
}else{
xhr=newActiveXObject('Microsoft.XMLHTTP')
}
//async異步執(zhí)行向服務器發(fā)送請求open
//基礎配置信息open(method,uri,async)
/*method*:請求的類型撵渡;GET或POST
*url*:文件在服務器上的位置
*async*:true(異步)或false(同步)*/
xhr.open(type,url,async);
xhr.send(str);//將請求發(fā)送到服務器。Get傳遞空Post傳遞str字符串
xhr.onreadystatechange = function(){
//創(chuàng)建信息返回0 配置信息返回 1 發(fā)送信息完成返回 2訪問數(shù)據結束返回4
/*xhr.statusHTTP協(xié)議狀態(tài)碼
xhr.status==200訪問資源路徑正確并且結束成功正確
xhr.status==304緩存路徑
xhr.status==400請求參數(shù)錯誤(參數(shù)傳少了)
xhr.status==404訪問路徑錯誤路(路徑寫錯了)
xhr.status==500后臺服務器錯誤*/
if(xhr.readyState==4&&xhr.status==200){
//responseText 獲得字符串形式的響應數(shù)據粒氧。
var data=xhr.responseText;
//異常處理機制
try{
//JSON.parse將JSON字符串轉換為對象
var e=JSON.parse(data);
}catch(s){
console.info(s); //拋出異常
};
fun(e);
}
}
}
調用ajax
var url = "后端提供的網址",
var obj = {
upass:頁面獲取的用戶名节腐,
upass:頁面獲取的密碼,
}
ajax('get',url,true,obj,function(e){
if(e.code==200&&e.data){
alert('登陸成功');
window.location=index.html';
}else{
alert('對不起我們服務器掛掉了');
}
})
同源安全策略
是網景公司提出的一個著名的安全策略,只有在域名端口協(xié)議相同時才進行訪問饱苟;
同源是指域名狼渊,協(xié)議,端口相同城须;
Jsonp跨域處理
JSONP(JSON with Padding)是一個非官方的協(xié)議米苹,它允許在服務器端集成Script tags返回至客戶端驱入,通過javascript callback的形式實現(xiàn)跨域訪問。Callback回調函數(shù)~~~
跨域原理:利用js構造一個script標簽莺褒,把json的url賦給script的scr屬性雪情,把這個script插入到dom里,讓瀏覽器去獲取尘执。
function jsonp(url,data){
var param='';
for(var in data){
param+=i+'='+data[i]+'&';
}
//跟ajax一樣,獲取url后的一串字符串
url+='?'+param;
var domScript = document.createElement('script');
//創(chuàng)建一個script標簽
domScript.src=url;
//給script標簽添加地址,將script(帶有src地址)插入到head中
document.getElementsByTagName('head')[0].appendChild(domScript);
}
//測試訪問的是360天氣表悬,傳遞值會返回城市天氣等等數(shù)據
var url="http://cdn.weather.hao.#/api_weather_info.php";
var data={app:'hao360',code:101011200,_jsonp:"weath"}
jsonp(url,data);
function weath(e) {
var weathArr=e.weather;
var dayWeath=[];
var nightWeath=[];
var dateArr=[]
for(var i=0;i<weathArr.length;i++){
var everyday=weathArr[i];
dayWeath.push(everyday.info.day[2]);
nightWeath.push(everyday.info.night[2]);
dateArr.push(everyday.*date*.substring(5));
}
}
//script標簽引用的內容我們獲取不到,則返回一個自動運行的函數(shù)丧靡;
//由前端給后端傳遞函數(shù)名
Jquery中的ajax
常用方法
load(url,[data]蟆沫,[callback])常用于遠程將html代碼插入dom元素中
url:(必填)請求html頁面的url地址、
若data為空則為get方式傳值温治,否則post方式
如$(‘#demo’).load(‘text.html’)將text頁面的內容加入到id為demo的div中饭庞,
注意:load()方法 無論Ajax請求是否成功,只要當請求完成后熬荆,回調函數(shù)就被觸發(fā)
$.get(url,[data],[callback],[type])以get方式進行ajax請求
Type:服務器端返回內容的格式(xml舟山,html,script·卤恳,json累盗,text)
Callback函數(shù)
function(e,textStatus){
//e:返回的內容
//請求數(shù)據返回的狀態(tài)有success error
}
$.post()以post方式進行ajax請求
Get方式跟post方式的區(qū)別get方式對傳輸?shù)臄?shù)據大小有限制(通常不能大于2kb)纬黎,get方式請求的數(shù)據會被瀏覽器緩存起來幅骄,其他人可以從瀏覽器的歷史記錄中取得這些數(shù)據,安全性差本今。
$.getJSON()用于加載json文件
最麻煩但最正宗的方法:
$.ajax(
{
type:’get’,
url:’’,
success:function(e){
}
}
常用參數(shù):url拆座,type:請求方式(get/post),
data:傳json對象后者string字符串 建議傳json對象 好理解一點冠息;
注意:
1挪凑、如果在ajax外部獲取ajax的數(shù)據,必須使用全局變量來進行定義
2、ajax后添加進來的數(shù)據 如果 想綁定事件逛艰,一般使用事件委托jq的on()方法