Ajax-Js原生Ajax和Jquery的Ajax(一)
来源:互联网 发布:vscode markdown 预览 编辑:程序博客网 时间:2024/05/17 09:27
一、Ajax概述
1.什么是同步,什么是异步
同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态
异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随 意做其他事情,不会被卡死
1.Ajax的运行原理
页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到 服务器端,在这段时间里,客户端可以任意进行任意操作,
直到服务器端将数据返回 给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面1 功能。
一、js原生的Ajax技术(了解)
js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的,要使用js原 生的Ajax完成异步操作,有如下几个步骤:
1)创建Ajax引擎对象
2)为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)
3)绑定提交地址
4)发送请求
5)接受响应数据
function fn1(){//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象var xmlHttp = new XMLHttpRequest();//2、绑定监听 ---- 监听服务器是否已经返回相应数据xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState==4&&xmlHttp.status==200){//5、接受相应数据var res = xmlHttp.responseText;document.getElementById("span1").innerHTML = res;}}//3、绑定地址xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);//4、发送请求xmlHttp.send();}
onreadystatechange 事件
对ajax引擎在请求服务器响应过程进行监听有如下状态:readyState:
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
200: "OK"
404: 未找到页面
如果正常响应则进行接收:xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
注意:如果是post提交
在发送请求之前设置一个头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
总结:
所用异步访问都是ajax引擎
阅读全文
0 0
- Ajax-Js原生Ajax和Jquery的Ajax(一)
- Js原生Ajax和Jquery的Ajax
- 原生js和jQuery的AJAX实现
- js原生ajax与jQuery的ajax
- 原生ajax和jquery ajax的使用
- 原生ajax和jQuery的ajax
- js原生ajax与jquery的ajax的用法区别
- 原生JS的ajax
- 原生的Ajax和Jquery的Ajax用法
- jquery ajax、 原生js ajax、string和json之间的转换
- 原生Ajax和Jquery的Ajax使用示例
- JavaScript 原生和JQuery 的Ajax
- 原生javascript 和jQuery的ajax用法
- 原生和jQuery的ajax用法
- 原生和jQuery的ajax用法
- 原生和jQuery的ajax用法
- 原生和jQuery的ajax用法
- 原生ajax 与jquery ajax 的对比
- Android 环信的简单使用
- CoordinatorLayout和AppBarLayout(android MD 三)
- 入一个整数数组,实现一个函数,来调整该数组中数字的顺序使得数组中所有的奇数位于数组的前半部分,所有偶数位于数组的后半部分。
- <机器学习>---决策树---补充
- NOIP集训Week 7总结
- Ajax-Js原生Ajax和Jquery的Ajax(一)
- 如何用atom直接运行python程序
- 饮料新品难存活,经销商需避开哪些选品雷区
- [Unity 网络]网络基础
- 用JavaSE知识写生成验证码功能
- java学习第39天,集合的排序
- 复杂度分析之很多重循环
- 3.线性表的链式表示
- Leetcode题解-31. Next Permutation