forked from wteam-xq/testDemo
-
Notifications
You must be signed in to change notification settings - Fork 1
/
ajax.html
162 lines (154 loc) · 5.81 KB
/
ajax.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
ajax用法
</title>
<link rel="stylesheet" type="text/css" href="./common.css" />
<style>
.res-cont{ border:2px solid #becceb; padding: 10px; }
#tForm{ margin: 20px 10px; }
</style>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<h3>ajax测试码（原生js实现）:演示防止跨源建议将此文件放置于后台项目文件中</h3>
<div class='btn-cont'>
<button id="getBtn" class="radius-btn">发送GET请求</button>
<button id="postBtn" class="radius-btn">发送POST请求</button>
</div>
<form id="tForm">
<label>输入传递给后台的参数：</label>
<input id="putVal" value="" />
</form>
<div class="res-cont">
<h4>返回结果：</h4>
<p id="showResult"></p>
</div>
<script>
// 简单的ajax对象
var myAjax = {
// XMLHttpRequest IE7+, Firefox, Chrome, Opera, Safari ； ActiveXObject IE6, IE5
xhr: window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'),
get: function(url, callback){
this.xhr.open('get', url);
this.onreadystatechange(callback, this.xhr);
this.xhr.send(null);
},
post: function(url, data, callback){
this.xhr.open('post', url);
this.xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
this.onreadystatechange(callback, this.xhr);
this.xhr.send(data);
},
onreadystatechange: function(func, _xhr){
_xhr.onreadystatechange = function(){
if(_xhr.readyState == 4){
if (_xhr.status == 200){
func(_xhr.responseText);
}
}
}
}
};
</script>
<script>
var get_btn = document.getElementById('getBtn'),
post_btn = document.getElementById('postBtn'),
put_val = document.getElementById('putVal'),
show_res = document.getElementById('showResult');
get_btn.onclick = getBtnClick;
post_btn.onclick = postBtnClick;
function getBtnClick(){
var _param = put_val.value;
xhrGet('/test_get', {name: _param}, function(err, res){
if (err) {
alert(err + ' 错误码： ' + res);
return false;
}
show_res.innerHTML = '请求成功：' + res;
});
}
function postBtnClick(){
var _param = put_val.value;
xhrPost('/test_post', {name: _param}, function(err, res){
if (err) {
alert(err + ' 错误码： ' + res);
return false;
}
show_res.innerHTML = '请求成功：' + res;
});
}
// 获得XHR对象
function createXHR(){
if (typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
// IE7以下浏览器（IE7开始支持 XMLHttpRequest对象）
if (typeof arguments.callee.activeXString != "string"){
// 使用 "Microsoft.XMLHTTP"可能 403
var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
i;
for (i = 0, len = versions.length; i < len; i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
}catch(e){
// 跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error('No XHR object available.');
}
}
// XHR对象 发送GET请求
function xhrGet(url, params, cbf){
var xhr = createXHR(),
i, len, _param;
for (i in params) {
if (params.hasOwnProperty(i)) {
url = addURLParam(url, i, params[i]);
}
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4){
if ( (xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 ) {
cbf(null, xhr.responseText);
}else{
cbf('请求失败', xhr.status);
}
}
}
xhr.open('get', url, false);
xhr.send(null);
}
// XHR对象 发送POST请求
function xhrPost(url, params, cbf){
var xhr = createXHR();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4){
if ( (xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 ) {
cbf(null, xhr.responseText);
}else{
cbf('请求失败', xhr.status);
}
}
}
xhr.open('post', url, false);
// 设置成表单提交
xhr.setRequestHeader("content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
// 拼凑GET url参数
function addURLParam(url, name, value){
url += (url.indexOf("?") == -1 ? "?" : "&");
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}
</script>
</body>
</html>