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. 2019前端面试题汇总（主要为Vue）

    摘要: 经典面试题. 原文:2019前端面试题汇总(主要为Vue) 作者:前端小酱 Fundebug经授权转载,版权归原作者所有. 毕业之后就在一直合肥小公司工作,没有老司机.没有技术氛围,在技术的道 ...

  2. linux学习笔记-shell-script相关知识

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.shell script的执行方法 条件:shell脚本文件必须具备可读可执行权限 1.直接命令执行 (1)使用绝对路径执行 ...

  3. Python爬取地图瓦片

    由于要在内网开发地图项目,不能访问在线的地图服务了,就想把地图瓦片下载下来,网上找了一些下载器都是需要注册及收费的,否则下载到的图都是打水印的,如下: 因为地图瓦片就是按照层级.行.列规则组织的一张张 ...

  4. asp.net/wingtip/创建数据访问层

    一. 什么是数据访问层 在wingtip项目中,数据访问层是对以下三者的总称:1. product类等数据相关的实体类(class)2. 数据库(database),对实体类成员的存储3. 上述二者的 ...

  5. OpenTK学习笔记

    OpenGL定义 OpenGL被定义为"图形硬件的一种软件接口".实质上是3D图形和模型库,具有高度可移植性,具有非常快的速度. OpenGL架构 术语pipeline常用于阐述彼 ...

  6. iOS----------developerDiskImage

    真机测试时提示Could not find Developer Disk Image.这该怎么办???? 这是由于真机系统过高或者过低,Xcode中没有匹配的配置包文件,我们可以通过这个路径进入配置包 ...

  7. Parcelable encountered IOException writing serializable object

    异常: java.lang.RuntimeException: Parcelable encountered IOException writing serializable object 这是在in ...

  8. Android为TV端助力 完全解析模拟遥控器按键

    public class VirturlKeyPadCtr { private static Instrumentation mInstrumentation; public static void ...

  9. 基础环境系列：PHP7.3.0并连接pache/IIS和MySQL

    版本: php7.3.0 MySQL8.0.12 Apache2.4 IIS8 一.下载PHP  1.下载php3.7 PHP版本:php7.3(7.3.0) 下载地址:https://windows ...

  10. PJSUA2开发文档--第六章 媒体 Media类

    6. 媒体(Media) 媒体对象是能够产生媒体或接受媒体的对象. Media的重要子类是AudioMedia,它代表音频媒体.PJSUA2支持多种类型的音频媒体对象: 捕获设备的AudioMedia ...