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. java StringBuilder 和 StringBuffer

    1, 相对于 String 来说, StringBuilder 和 StringBuffer 均是可变的 2, StringBuilder 线程不安全, StringBuffer 线程安全 3, 运行 ...

  2. gitbook 入门教程之常用命令详解

    不论是 gitbook-cli 命令行还是 gitbook editor 编辑器都离不开 gitbook 命令的操作使用,所以再次了解下常用命令. 注意 gitbook-cli 是 gitbook 的 ...

  3. 《我们不一样》Alpha冲刺_1-5

    第一天    日期:2018/6/15 1.1 今日完成任务情况以及遇到的问题. 马    兰.马   娟:用户.管理员数据库表的设计 李国栋.张惠惠:前端登录界面代码书写 伊力亚.张   康:配置s ...

  4. 浅谈TCP IP协议栈(一)入门知识【转】

    说来惭愧,打算写关于网络方面的知识很久了,结果到今天才正式动笔,好了,废话不多说,写一些自己能看懂的入门知识,对自己来说是一种知识的总结,也希望能帮到一些想了解网络知识的童鞋. 万事开头难,然后中间难 ...

  5. Java文件下载：如何编码文件名称以及如何设置HttpServletResponse

    在下载文件时,经常遇到文件名乱码等问题. 本文说明如何编码文件名,以及如何设置HttpServletResponse对象. 1,如何编码文件名 String userAgent = request.g ...

  6. dynalist 配额

    2018-8-29 dynalist 配额 提示有一个G的配额 就是使用的流量用光了.仅有1个G

  7. docker swarm的常用操作

    1. 说明 本文档针对docker swarm操作. 针对的系统是以一个本地的测试系统为例.其中机器信息如下,172.16.1.13作为docker swarm的管理机. 本地测试的机器列表信息: 主 ...

  8. 一个小错误：error LNK2019: 无法解析的外部符号 "public: __thiscall Turtle::~Turtle(void)" (??1Turtle@@QAE@XZ)，该符号在函数 _main 中被引用

    昨天在撸代码的时候遇到了一个十分蛋疼的错误 : 错误: 1>3.obj : error LNK2019: 无法解析的外部符号 "public: __thiscall Turtle::~ ...

  9. VMware14虚拟机下安装Centos6.5

    一.下载VMware14,CentOS6.5光盘映像文件. https://pan.baidu.com/s/1WaTBnYuNC5dLYM_Ra2bjBQ 二.安装过程 1.打开VMware虚拟机 — ...

  10. Python爬虫【实战篇】bilibili视频弹幕提取

    两个重要点 1.获取弹幕的url是以 .xml 结尾 2.弹幕url的所需参数在视频url响应的 javascript 中 先看代码 import requests from lxml import ...