AJAX入门教程哪里的好？(原生JS封装AJAX方法)
AJAX入门教程哪里的好？
在学习AJAX入门教程之前，大家应该对AJAX有一个简单的了解。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
AJAX入门教程哪里的好?网络上的AJAX入门教程五花八门，让很多小伙伴看的眼花缭乱。小编推荐动力节点java培训机构的AJAX入门教程，课程内容详细，由浅到深，适合刚接触AJAX的朋友进行学习。
AJAX入门教程有以下知识点需要大家掌握：
一、Ajax运行原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到 服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回 给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面的功能。
二、JS原生态Ajax技术(比较麻烦)
js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：
1、创建Ajax引擎对象
2、为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)
3、绑定提交地址
4、发送请求
5、接受响应数据
三、JSON数据格式(现在用的较多，且面试常问)
json是一种与语言无关的数据交换的格式，作用：
使用ajax进行前后台数据交换
移动端与服务端的数据交换
1、JSON的格式与解析
2、JSON的转换插件
四、JQuery的Ajax技术(非常重要)
jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的作方法更简洁，功能更强大，但开发中经常使用的有三种。
Ajax教程：https://www.ixigua.com/6844034235439776264
以上就是动力节点java培训机构的小编针对“AJAX入门教程哪里的好?”的内容进行的回答，希望对大家有所帮助，如有疑问，请在线咨询，有专业老师随时为你服务。
原生JS封装AJAX方法
Ajax大家每天都在用，jquery库对Ajax的封装也很完善、很好用，下面我们看一下它的内部原理，并手动封装一个自己的Ajax库。
一、原理
原生Ajax的发送需要四步：
1) 创建Ajax对象: XMLHttpRequest
2) 设置请求参数: open(请求参数[get/post],url地址, 是否异步[true/false] )
3) 设置回调函数: onreadystateChange 用于处理返回的数据
4) 发送请求: send()
| //TODO step1: 创建ajax对象
var xhr = new XMLHttpRequest(); //TODO step2: 设置请求参数 xhr.open(\'get\',\'01.php\',true); //TODO step3: 设置回调 xhr.onreadystatechange = function () { //接收返回数据 console.log(xhr.responseText);//responseText 用于接收后台响应的文本 } //TODO step4: 发送请求 xhr.send(); |
二、封装
封装的核心思想就是把需要动态变化的部分当成参数，不变的部分就留在那里，在上面的代码中请求方式（get、post）、请求地址url、请求参数data、成功的回调success、失败回调error等，这些参数都是动态变化的；而创建Ajax对象 XMLHttprequest、事件监听onreadystatechange等是固定的，所以第一步我们要确定好封装的参数：
v url 请求地址
v data 请求数据
v type 请求类型
v success 成功回调
v error 失败回调
v beforeSend 发送前调用 return false 阻止发送
v complete ajax请求成功的回调, 无论什么时候都会执行
| function ajax(option){ //用户配置option 默认配置init var init = { type:\'get\', async:true, url:\'\', success: function () { }, error: function () { }, data:{}, beforeSend: function () { console.log(\'发送前...\'); return false; } }; //TODO step1: 合并参数 for(k in option){ init[k] = option[k]; } //TODO step2: 参数转换 var params = \'\'; for(k in init.data){ params += \'&\'+k+\'=\'+init.data[k]; } var xhr = new XMLHttpRequest(); // type url //TODO step3: 区分get和post,进行传参 var url = init.url+\'?__=\'+new Date().getTime(); //TODO step4: 发送前 var flag = init.beforeSend(); if(!flag){ return; } if(init.type.toLowerCase() == \'get\'){ url += params; xhr.open(init.type,url,init.async); xhr.send(); }else{ xhr.open(init.type,url,init.async); xhr.setRequestHeader(\'content-type\',\'application/x-www-form-urlencoded\'); xhr.send(params.substr(1)); } xhr.onreadystatechange = function () { if(xhr.readyState == 4){ if(xhr.status == 200){ init.success(xhr.responseText); }else{ //error init.error(); } } } } |
这里我们要注意的是get和post的传参方式位置不一样，get请求需要直接拼接在url地址后边，post请求需要在send方法里面传参，而且需要这是请求头setRequestHeader(\'content-type\',\'application/x-www-form-urlencoded\')，所以封装时要进行区分。
由于参数过多，用户不需要每次都传入很多参数，否则用起来会非常繁琐。所以我们采取默认参数的形式，用户不传入就是用默认值，传入就是用用户的参数。
三、使用示例
| ajax({
url: \'test.json\', data:{test:123,age:456}, //type:\'post\', success: function (res) { console.log(res); } }); |
以上就是原生JS封装AJAX方法的详细内容，更多请关注网站的其它相关文章！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » AJAX入门教程哪里的好？(原生JS封装AJAX方法)
