在Html页面中调用ajax代码

以最原始的XMLHttpRequest形式，实现ajax.

 

封装的方法

 1  /**
 2                  * 发送一个 AJAX 请求
 3                  * @param {String} method 请求方法
 4                  * @param {String} url 请求地址
 5                  * @param {Object} params 请求参数
 6                  * @param {Function} done 请求完成过后需要做的事情（委托/回调）
 7                  */
 8                 function commonAjax (method, url, params, done) {
 9                     // 统一转换为大写便于后续判断
10                     method = method.toUpperCase()
11                     // 对象形式的参数转换为 urlencoded 格式
12                     var pairs = []
13                     for (var key in params) {
14                         pairs.push(key + '=' + params[key])
15                     }
16                     var querystring = pairs.join('&')
17                     var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new
18                     ActiveXObject('Microsoft.XMLHTTP')
19                     xhr.addEventListener('readystatechange', function () {
20                         if (this.readyState !== 4) return
21                     // 尝试通过 JSON 格式解析响应体
22                         try {
23                             done(JSON.parse(this.responseText))
24                         } catch (e) {
25                             done(this.responseText)
26                         }
27                     })
28                     // 如果是 GET 请求就设置 URL 地址 问号参数
29                     if (method === 'GET') {
30                         url += '?' + querystring
31                     }
32                     xhr.open(method, url)
33                     // 如果是 POST 请求就设置请求体
34                     var data = null
35                     if (method === 'POST') {
36                         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
37                         data = querystring
38                     }
39                     xhr.send(data)
40                 }

 

调用：

 1                     //1. 获取界面上的元素 value
 2                     var txtUsername = "admin";
 3                     var txtPassword = "admin";
 4 
 5                     var url = 'http://127.0.0.1:8080/platform_oracle/app/userController/selectUserByUserCode.do';
 6                     var  params= { userCode: txtUsername, userPwd: txtPassword };
 7 
 8                     commonAjax('post',url,params,function (data){
 9                         console.log(data);
10                     });

 

返回值：

json格式化后的结果

 1 {
 2     "MSG_ID": "SUCCESS",
 3     "RESULT_CODE": "1",
 4     "MSG_CONTENT": "获取成功！",
 5     "Content": {
 6         "id": "E9EE2E1D4B834C59AA9719A7ADB0BA41",
 7         "password": "21232F297A57A5A743894A0E4A801FC3",
 8         "status": "1",
 9         "userName": "admin",
10         "orgCode": null,
11         "orgName": "xxx软件",
12         "userCode": "admin",
13         "updateUser": null,
14         "jobNum": "000000",
15         "createUser": null,
16         "cellPhone": "11111",
17         "createTime": null,
18         "updateTime": null,
19         "roleName": null,
20         "delFlag": "0",
21         "icon": null
22     }
23 }