1 /*模拟jQuery的写法 (简单写法)*/
2 var $=
{};
3 /*ajax*/
4 $.ajax =
function (options) {
5 /*
6 * 请求
7 * 1.请求接口 type get post 默认的是get 决定是否设置请求头
8 * 2.接口地址 url 不确定 字符串 如果用户没有传 默认的接口地址为当前路径
9 * 3.是否是异步 async 默认的就是异步 true;false 是同步请求
10 * 4.提交数据 data 默认的是对象 {name:'XXX',age:'19'} 默认是{}
11 *
12 * 响应
13 * 1.成功回调函数 success 代表的是一个函数 用来处理成功之后的业务逻辑的函数
14 * 1.1 字符串 xml json格式的字符串 数据转换
15 * 2.失败回调函数 error 代表的是一个函数 用来处理失败之后的业务逻辑的函数
16 * 2.1 返回一些错误信息
17 * */
18
19
20
21
22 /*处理默认参数*/
23 if(!options ||
typeof options != 'object')
return false;
24 /*如果没有传 使用默认的get方式提交*/
25 var type = options.type || 'get'
;
26 /*如果没有传 使用默认的当前路径*/
27 var url = options.url ||
location.pathname;
28 /*强制 是false的时候就是同步 否则都是异步*/
29 var async = options.async ===
false?
false:
true;
30 /*如果没有就是空对象*/
31 var data = options.data ||
{};
32 /*对象是无法进行传输 {name:'',age:''} 拼接字符串 name=xzz&age=18*/
33 var dataStr = ''
;
34 for(
var key
in data){
35 dataStr+=key+'='+data[key]+'$'
;
36 }
37 dataStr = dataStr && dataStr.slice(0,-1
);
38
39 /*ajax封装编程*/
40 /*初始化*/
41 var xhr =
new XMLHttpRequest();
42 xhr.open(type,type == 'get'?url+'?'+
dataStr:url,async);
43 /*请求头*/
44 if(type == 'post'
){
45 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'
);
46 }
47 /*请求主体*/
48 xhr.send(type=='get'?
null:dataStr);
49
50
51
52 /*响应*/
53 xhr.onreadystatechange =
function () {
54 /*一定要完全完成通讯*/
55 if(xhr.readyState == 4
){
56 if(xhr.status == 200
){
57 /*请求成功*/
58 /*字符串 xml josn格式的字符串 数据转换*/
59 /*获取响应类型*/
60 var contentType = xhr.getResponseHeader("Content-Type"
);
61 var result =
null;
62
63 if(contentType.indexOf('xml')>-1
){
64 /*xml*/
65 result =
xhr.responseXML;
66 }
else if(contentType.indexOf('json')>-1
){
67 /*json*/
68 result =
JSON.parse(xhr.responseText);
69 }
else{
70 /*string*/
71 result =
xhr.responseText;
72 }
73 options.success &&
options.success(result);
74
75 }
else{
76 /*请求失败*/
77 options.error &&
options.error({status:xhr.status,statusText:xhr.statusText});
78 }
79 }
80 }
81 };
82
83 /*get*/
84 $.get =
function (options) {
85 options.type = 'get'
;
86 $.ajax(options);
87 }
88 /*post*/
89 $.get =
function (options) {
90 options.type = 'post'
;
91 $.ajax(options);
92 }
注：简单写法，仅供参考。
转载于:https://www.cnblogs.com/bfc0517/p/6185416.html
相关资源：数据结构—成绩单生成器
