1.同步和异步

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待  卡死状态

异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死

2.ajax运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到 服务器端，

在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，

ajax引擎会监听到ajax的状态改变，触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

（我觉得ajax起到一个缓冲的作用，就像io系统中的通道，会接受并传递客户端的请求，此时客户端就不需要等待响应了）

以下是原生js的ajax演示：

点击异步访问服务器端，过3秒后会在页面显示一个随机数，在此期间，客户端并没有卡死，可以点击test按钮

点击同步访问服务器端，过3秒后会在页面显示一个随机数，在此期间，客户端卡死，不可以点击test按钮

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

	function fun1(){

		//1.创建ajax引擎对象

		var xmlHttp=new XMLHttpRequest();

		//2.绑定监听   监听服务器是否已经返回相应数据

		xmlHttp.onreadystatechange=function(){

			// 当请求已完成，响应已就绪 并且正确返回请求资源时。

			//ajax引擎才会接收相应的数据

			if(xmlHttp.readyState==4&&xmlHttp.status==200 ){

				//5.接受相应数据

				var res=xmlHttp.responseText;

				document.getElementById("span1").innerHTML=res;

			}

		}

		//3.绑定地址

		// 1)请求资源的方式  2）访问的web资源的地址  3）是否异步

		xmlHttp.open("GET","/WEB22/ajaxServlet",true);

		//4.发送请求

		xmlHttp.send();

	}

	function fun2(){

		//1.创建ajax引擎对象

		var xmlHttp=new XMLHttpRequest();

		//2.绑定监听   监听服务器是否已经返回相应数据

		xmlHttp.onreadystatechange=function(){

			// 当请求已完成，响应已就绪 并且正确返回请求资源时。

			//ajax引擎才会接收相应的数据

			if(xmlHttp.readyState==4&&xmlHttp.status==200 ){

				//5.接受相应数据

				var res=xmlHttp.responseText;

				document.getElementById("span2").innerHTML=res;

			}

		}

		//3.绑定地址

		// 1)请求资源的方式  2）访问的web资源的地址  3）是否异步

		xmlHttp.open("GET","/WEB22/ajaxServlet",false);

		//4.发送请求

		xmlHttp.send();

	}

</script>

</head>

<body>

	<input type="button" value="异步访问服务器端" onclick="fun1()" ><span id="span1"></span><br>

	<input type="button" value="同步访问服务器端" onclick="fun2()" ><span id="span2"></span><br>

	<input type="button" value="test" onclick="alert()" >

</body>

</html>

原生JS的Ajax技术的更多相关文章

  1. Ajax工作原理和原生JS的ajax封装

    前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...

  2. 原生js实现ajax封装

    一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...

  3. 原生js实现Ajax

    一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...

  4. 使用原生js写ajax

    // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...

  5. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  6. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

  7. 原生js中用Ajax进行get传参

    原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  8. 原生js实现ajax与jquery的ajax库，及json

    这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...

  9. 用原生js实现ajax、jsonp

    转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...

随机推荐

  1. Django学习之二：Django 项目创建 和 应用创建

    Django 项目创建 和 应用创建 创建一个Django项目 都是在相应平台的命令行环境下操作: 1. 进入用于存放项目的目录下 1.1 windows下切换目录:先进入具体的分区磁盘中如E盘就输入 ...

  2. Dynamics CRM教程:图表的Top设置及导出修改和导入

    关注本人微信和易信公众号: 微软动态CRM专家罗勇,回复144或者20150412可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 上一篇博客制作的图表放在Dashb ...

  3. Android的WebView调试工具（无需Fan墙，可同时调试多个设备，永不过期）

    缘起 前端开发离不开Chrome的开发者工具,尤其是调试Android WebView时.然而,如果使用chrome://Inspect的方法,国内的开发者会惊奇地发现“空白啊”!为此,我发布过这个离 ...

  4. DataReader的使用

    public List<Student> GetList()        {            string sql = "select * from Student&qu ...

  5. SQL语句中不同的连接JOIN

    为了从两个表中获取数据,我们有时会用JOIN将两个表连接起来.通常有以下几种连接方式: JOIN  or  INNER JOIN(内连接) : 这两个是相同的,要求两边表同时有对应的数据,返回行,任何 ...

  6. it's time to change myself now (2018.10.31)

    自16年从新屋熊职校毕业,入职深圳某厂从事云存储两年半了.两年半的时间很快,快的感觉一生都会飞快,两年多一直很忙,忙的几乎忘了自己是否正向改变过. 正向改变,or 积极改变,今年十一回家,与几个好友小 ...

  7. mysql的函数与储存过程与pymysql的配合使用

    现在mysql上定义一个函数,一个储存过程 函数: delimiter \\ CREATE FUNCTION f2 ( num2 INT, num1 INT ) RETURNS INT BEGIN D ...

  8. DRF项目创建流程(1)

    一 web应用模式 前后端不分离 前后端分离 二 RESTFUL API规范 REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态 ...

  9. KafkaManager编译安装使用（支持kerberos认证）

    为了能够方便的查看及管理Kafka集群,yahoo提供了一个基于Web的管理工具(Kafka-Manager). 这个工具可以方便的查看集群中Kafka的Topic的状态(分区.副本及消息量等),支持 ...

  10. web框架开发-路由控制

    URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于客户端发来的某个URL调用哪一段逻辑代码 ...