澶у�跺ソ锛�����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.�村�璁ㄨ��