【Ajax 02】ajax笔记

it2023-08-17 76

同步异步

同步：一行代码执行结束之后才会执行下面一行代码

异步：不等待这行代码结束，直接执行后面的代码

封装Ajax

将Ajax函数封装成一个大的函数，函数的参数为：

<body> <script typr="text/javascript"> function ajax(options){ //创建ajax对象 var xhr = new XMLHttpRequest(); //使用for拼接成字符串 var params = ''; for (var attr in options.data){ params += attr + '=' + options.data[attr] +'&'; } //截取字符串 params = params.substr(0,params.length-1); //判断请求方式 if(options.type == 'get'){ options.url = options.url + '?' + params; } //配置对象 xhr.open(options.type,options.url); //发送请求 if(options.type == 'post'){ var contentType = options.header['Content-Type'] xhr.setRequestHeader('Content-Type',options.header['Content-Type']); //判断用户希望的请求参数格式类型 //如果是 json 则传递进 json //否则传递 get if(contentType == 'application/json'){ xhr.send(JSON.stringify(options.data)) }else{ xhr.send(params); } xhr.send(params); }else{ xhr.send(); } xhr.send(); xhr.onload = function(){ //获取响应头的内容 var contentType = xhr.getResponseHeader('Content-Type'); var reponseText = xhr.reponseText; if(contentType.includes('application/json')){ reponsetext = JSON.parse(reponseText); } if(xhr.status == 200){ options.success(xhr.reponseText); }else{ options.error(xhr.reponseText,xhr); } } } ajax({ var defult = { type:'get', url:'', data:{}, header:{ 'Content-Type':'application/x-www-form-urlencoded' }, success:function(){}, error:function() }; type:'get', url:'http://localhost:3000/first', data:{ name:'zhangsan', age:20 }, header:{ 'Content-Type':'application/json' }, success:function(data){ console.log('返回结果：' + data) } }), error function(data){ console.log('这里是error函数，' + data); console.log(xhr) } /* 请求参数的位置问题： 1、get：放在请求后面 2、post：放在send（）里面请求参数格式问题： 1、application/x-www-form-urlencoded name=zhangsan&age=20 2、application/json {name:'zhangsan',age:20} */ </script> </body>

把 options 改成 defaults

总结：

当ajax被调用的时候，使用params来拼接；

循环 options.data 完成拼接；

循环后的赋值给 params

长度 -1 截去最后一个 &

设置一个 default 默认值，这样就不需要传递所有的参数

使用art-template

<head> <script src='../template-web.js'></script> </head> <body> <script type="text/html" id="tp1"> <h1>{{username}}</h1> </script> <script type="text/javascript"> var html = template('tp1',{username:'zhangsan',age:20}); document.getElementById('container').innerHTML = html; </script> </body>

邮箱自动提示

搜索框智能提示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EgYB2yNx-1603193508079)(C:\Users\18130\AppData\Roaming\Typora\typora-user-images\image-20201019115306546.png)]

最新回复(0)