|
|
@@ -1,31 +1,41 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
+
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Document</title>
|
|
|
</head>
|
|
|
+
|
|
|
<body>
|
|
|
<script>
|
|
|
|
|
|
// ajax原理 他不能以file协议访问 他只能以http协议访问
|
|
|
|
|
|
- // 第一步创建XMLHttpRequest对象
|
|
|
- var xhr = new XMLHttpRequest();
|
|
|
- // 第二步设置请求方式和请求地址 三个参数 第一个是请求方式 第二个是请求地址 第三个是是否异步
|
|
|
- xhr.open('get',"http://shop-api.edu.koobietech.com/prod/tagProdList",true);
|
|
|
- // 第三步发送请求
|
|
|
- xhr.send();
|
|
|
- // 第四步注册回调函数 对请求结果进行处理
|
|
|
- xhr.onreadystatechange = function(){
|
|
|
- if(xhr.readyState == 4 && xhr.status == 200){
|
|
|
- console.log(xhr.responseText);
|
|
|
+ function ajaxFun(xhrType,xhrUrl,callBack) {
|
|
|
+ // 第一步创建XMLHttpRequest对象
|
|
|
+ var xhr = new XMLHttpRequest();
|
|
|
+ // 第二步设置请求方式和请求地址 三个参数 第一个是请求方式 第二个是请求地址 第三个是是否异步
|
|
|
+ xhr.open(xhrType, xhrUrl, true);
|
|
|
+ // 第三步发送请求
|
|
|
+ xhr.send();
|
|
|
+ // 第四步注册回调函数 对请求结果进行处理
|
|
|
+ xhr.onreadystatechange = function () {
|
|
|
+ if (xhr.readyState == 4 && xhr.status == 200) {
|
|
|
+ var res = JSON.parse(xhr.responseText)
|
|
|
+ callBack(res);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
//实现一下方法
|
|
|
// ajaxFun("请求方式","请求地址","回调函数");
|
|
|
// 当请求成功之后在回调函数中处理请求结果 讲结果转换成对象输出
|
|
|
|
|
|
+ ajaxFun("GET","http://shop-api.edu.koobietech.com/prod/tagProdList",function (data) {
|
|
|
+ console.log(data);
|
|
|
+ });
|
|
|
</script>
|
|
|
</body>
|
|
|
+
|
|
|
</html>
|
