浠�涔���Ajax

澶у�跺ソ锛�����IT淇����㈡���藉���㈢��7����瀛����╁缓��锛�涓���姝g�寸函娲�������WEB��绔�绋�搴�����

��褰�

1.����浠�缁�

2.�ヨ������

3.甯歌���棰�

4.瑙e�虫�规�

5.缂���瀹���

6.�╁�����

7.��������

8.�村�璁ㄨ��

1.����浠�缁�

浠�涔���Ajax锛�

AJAX�斥��Asynchronous JavaScript and XML��锛�寮�姝ョ��JavaScript涓�XML����锛�锛�������涓�濂�缁煎��浜�澶�椤规������娴�瑙��ㄧ��缃�椤靛��������� Ajax��姒�蹇电�辨�拌タ路瑭瑰�澹�路璐剧���规�����恒��

��杩��ㄥ���颁����″�ㄨ�琛�灏����版��浜ゆ��锛�Ajax��浠ヤ娇缃�椤靛���板�姝ユ�存�般�� 杩����崇����浠ュ�ㄤ����板��杞芥�翠釜缃�椤电�����典�锛�瀵圭�椤电�����ㄥ��杩�琛��存�般�� 浼�缁���缃�椤碉�涓�浣跨�� Ajax锛�濡�����瑕��存�板��瀹癸�蹇�椤婚��杞芥�翠釜缃�椤甸〉����

2.�ヨ������

浼�缁���璇锋��瑰�

浼�缁���web搴��ㄧ�搴�涓�锛��ㄦ�峰�����″�ㄥ����涓�涓�璇锋�锛��跺��绛�寰�锛����″�ㄦ�ュ���扮�ㄦ�风��璇锋��跺����搴����ㄨ�娈垫�堕�村��锛��ㄦ�蜂��讳�涔� ������涓�涓�绌虹�介〉�㈢����杩�����涓轰互寰���浼�杈��瑰�涓哄��姝ュ����瑰����夸�浠ユ�ユ��浠�瀵硅�绉�web浜や�妯″�宸茬�涔���浜�锛�骞朵�浠ヤ娇�ㄨ����瑙�搴��ヨ�插凡缁�瑙�寰�������褰��剁��浜���浜���

Ajax��宸ヤ��瑰�

��浼�缁���web搴��ㄤ���锛�Ajax����浜�寮�姝ヤ氦浜��垮��浜��ㄦ�疯�锋�-绛�寰�-搴�绛�浜や��瑰���缂虹�广�� Ajax�ㄥ��ㄧ�搴������″�ㄤ腑寮��ヤ�涓�涓�涓��村�---Ajax寮���锛�瀹�����Javascript缂�����锛��ㄤ�涓�������妗��朵腑杩�琛���Ajax寮���璐�璐e���扮�ㄦ�风����锛� 浠ュ��浠h〃�ㄦ�峰�����″�ㄨ�琛�浜や���Ajax寮�����璁哥�ㄦ�峰�����″�ㄨ�琛�寮�姝ョ��浜や����ㄦ�锋�����讳�涔�������绌虹�介〉����

3.甯歌���棰�

1��IE娴�瑙��ㄤ��㈢��缂�瀛���棰�

2��璺ㄥ����棰�

3��Ajax涔辩����棰�

4��浣跨��post��浜ょ���跺����瑕�璁剧疆content-type涓�"application/x-www-form-urlencoded"

5��Ajax瀵硅薄灞��х��澶у�����棰�

6��Ajax�舵��涓�0����棰�

涓���涓�涓�璁茶В甯歌���棰��虹�扮��������瑙e�冲��娉�

4.瑙e�虫�规�

绗�涓�涓���棰�锛�缂�瀛���棰�锛�

��IE娴�瑙��ㄤ���浣跨��get璇锋��讹�濡���绗�涓�娆¤�锋�浜��版��涔���IE浼����ㄧ�瀛��版��锛�濡���涓�涓�娆″���������风�� 璇锋����跺��娴�瑙��ㄤ����ㄥ���绘�剧�瀛��剧ず�烘�ワ���浠ュ���璇锋����版�����������跺��锛�杩�������涓��板�������� 瑙e�冲��娉�锛�xhr.open("get","xxxx.aspx?_dc="+new Date().getTime(),true);灏辨���ㄨ�锋������� ��涓�_dc=������璁�url������涓�锛�������锛��规��post璇锋���

绗�浜�涓���棰�锛�璺ㄥ����棰�锛�

杩�����浠�����瑙��扮����澶���锛�涔�����������涓�涓���棰������颁��㈢�存�ラ����Nginx璺ㄥ��瀹��般���ㄦ���″�ㄤ���璇�锛�浜ょ���绔��с������ 娉ㄦ�� Nginx璺ㄥ����浠ュ���堕��缃�澶�涓��ュ�g��锛�灏辨��澶�����涓�location灏卞ソ浜�锛��跺��location���㈠甫�����颁�涓��峰氨��浠ヤ���

绗�涓�涓���棰�锛� Ajax涔辩����棰�

涔辩����棰��界�舵��浠��������扮��涓�澶�锛�浣���涔�灞�浜�姣�杈�甯歌���涓�涓���棰�浜����虹�扮��涓昏�����灏辨��缂���涓�涓��村�艰�寸���� 濡����虹�颁贡����棰�浜�锛�棣���妫��ヤ�涓�meta澹版����charset瑕���璇锋���椤甸�㈣�����charset涓��淬��response.charset="gb2312 or utf-8"

绗���涓���棰�锛�浣跨��post��浜ょ���跺����瑕�璁剧疆

content-Type: application/x-www-form-urlencoded锛� � � � � � � � � � jQuery涓�锛�content-Type: application/x-www-form-urlencoded;charset=utf-8;

AngularJS涓�$http��content-Type: application/json; charset=utf-8;

浣跨�ㄥ����Ajax��瑕���open浠ュ�����戒娇��xhr.setRequestHeader()�规�锛������洪���� xhr.open("post","xxxx.aspx",true); xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")

�ㄥ�������跺�椤诲��open()�规�涔���send()�规�涔���璋��ㄣ��

绗�浜�涓���棰�锛�Ajax瀵硅薄灞��х��澶у�����棰�锛���浜�娴�瑙��ㄦ��濡�����锛�瀵瑰ぇ灏�����������锛�if (xhr.readystate==4)杩�绉���娉�锛� ��IE涓�����绔���锛�浣�����ff涓�灏辫�涓���浜�锛���涓�IE涓��哄��澶у���锛�ff���哄��澶у�����������娉�涓�if (xhr.readyState==4)锛�����杩���灞��� responseText锛�responseXML��涔������ㄩ┘宄板舰寮�����娉���浠ラ�垮��杩�涓���棰���

绗���涓���棰�锛�Ajax�舵��0����棰�锛����跺���ㄦ�璇�Ajax浠g�����跺����浜� xhr.status==200���ゆ����锛�涓��翠��ц�xhr.status==200��浠g��锛� 杩�涓�灏遍��瑕�娉ㄦ��浜���xhr.status==200��瑕���杩����″�ㄧ‘璁ゅ���ヨ�����锛��ㄦ���″�ㄩ〉�㈡病��������璇�����杞����舵��杩���200�舵����锛� 姝ょ�舵����浣���杩�娴�瑙��ㄨ�块��椤甸�㈡�舵���″�ㄥ��涔����舵��涓��淬��杩�涓���浠�����灏辫���绔�瀵规�ュソ浜�锛���棰�涔�涓�澶с��

5.缂���瀹���

jQuery�规�

$.ajax({

url:"student-ajax/student",

type:"POST",

dataType:"json",

data:{

name:$("#names").val(),

qq:$("#QQs").val(),

},

success:function(data){

console.log(data);

if(data.code === 200){

alert($("#names").val() + "瀛���淇℃��" +data.message);

}else{

alert(data.message);

}

},

error:function(data){

console.log(data);

alert("娣诲��澶辫触");

}

});

}) ;

AngularJS�规�

$http({

method:'get',

url:('/a/a/all/document?type=1&page='+$scope.page),

headers:{'Content-Type':'application/x-www-form-urlencoded'}

})

.success(function (response) {

// console.log(12345);

console.log(response.total);

console.log(response);

console.log(aaa);

// if (response.message === "�ヨ�㈡����") {

$scope.userList = response.data;

$scope.userTotal = response.total;

$scope.page=response.page;

// console.log($scope.userList.total);

});

Javascript�����规�

var request = new XMLHttpRequest(); // �板缓XMLHttpRequest瀵硅薄;

request.onreadystatechange = function () { // �舵�����������讹��芥�拌���璋�;

if (request.readyState === 4) { // ����瀹���

// �ゆ����搴�缁���:

if (request.status === 200) {

// ����锛���杩�responseText�垮�板��搴�������:

return success(request.responseText);

} else {

// 澶辫触锛��规����搴����ゆ��澶辫触����:

return fail(request.status);

}

} else {

// HTTP璇锋�杩��ㄧ户缁�...

}

}

// ����璇锋�:

request.open("POST","/skill-ajax/a/login",true);

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

request.send();

alert('璇锋�宸插����锛�璇风��寰���搴�...');

// readyState�艰�存��

// 0,��濮���,XHR瀵硅薄宸茬���寤�,杩����ц�open

// 1,杞藉��,宸茬�璋���open�规�,浣���杩�娌″����璇锋�

// 2,杞藉�ュ����,璇锋�宸茬�����瀹���

// 3,浜や�,��浠ユ�ユ�跺�伴�ㄥ���版��

// status�艰�存��

// 200:����

// 404:娌℃�����版��浠躲���ヨ�㈡��URl

// 500:���″�ㄤ骇�����ㄩ��璇�

������璁茶В

(1) �ㄤ娇��xhr瀵硅薄����璇锋���澶���璇锋���搴�涔���锛�蹇�椤诲����js璇�瑷���寤轰�涓�xhr瀵硅薄���变�xhr瀵硅薄褰���杩�涓���w3c����锛���浠ユ����澶�绉��瑰�杩�琛���寤轰互瑙e�冲�煎�规�ч��棰����蜂���寤烘�瑰�濡�涓�锛�

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

(2) �����″�ㄥ����璇锋�

(a) open(method,url,async) 瑙�瀹�璇锋���绫诲����URL 浠ュ������寮�姝ュ���璇锋���

method锛�璇锋���绫诲��锛�GET �� POST

url锛���浠跺�ㄦ���″�ㄤ���浣�缃�

async锛�true锛�寮�姝ワ��� false锛���姝ワ�

(b)send(string)

灏�璇锋������版���″�ㄣ��

string锛�浠��ㄤ� POST 璇锋�

6.�╁�����

AngularJS璇锋����跺��,success()��then()�规����哄��?

$http({

url:'data.json',

method:'GET'

}).success(function(data,header,config,status){

//code goes here

}).error(function(data,header,config,status) {

//code goes here

});

var promise = $http({

url:'data.json',

method:'GET'

});

promise.then(function(resp) {

//resp��涓�涓���搴�瀵硅薄

}, function() {

//甯�����璇�淇℃����resp

})

then()�规�涓��朵�涓ょ��规���涓昏��哄����锛�瀹�浼��ユ�跺�板���寸����搴�瀵硅薄锛�淇℃���翠负�ㄩ��锛���success()��error()��浼�瀵瑰��搴�瀵硅薄杩�琛�����锛�浣跨�ㄨ捣�ユ�翠负�逛究��

7.��������

����涓�锛�浠�涔���璺ㄥ��

����浜�锛�AngularJS涓�then��success���哄��

����涓�锛�Ajax甯歌���棰�

8.�村�璁ㄨ��


浠�涔���Ajax_�捐��瑙�棰�

你可能感兴趣的:(浠�涔���Ajax)