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-admin 和 项目manage.py程序

    目录 Django django-admin 和 项目manage.py程序 它俩是什么? 命令程序用法 常用命令 Django django-admin 和 项目manage.py程序 它俩是什么? ...

  2. 常用的String原型

    对于常用的字符串原型的举例 在字符串末尾追加字符串 String.prototype.append = function (str) { return this.concat(str);} 删除指定索 ...

  3. 在java中写出完美的单例模式

    1. 前言 单例(Singleton)应该是开发者们最熟悉的设计模式了,并且好像也是最容易实现的——基本上每个开发者都能够随手写出——但是,真的是这样吗? 作为一个Java开发者,也许你觉得自己对单例 ...

  4. shell脚本批量ssh登陆主机并执行命令

    shell脚本批量ssh登陆主机并执行命令 今天在客户现场遇到了这个问题,客户没有管理工具,无法批量登陆主机下发命令,几个个C段啊,让我一个一个登陆,.................. 所以写了个s ...

  5. c:\windows\system32\config\systemprofile\desktop 打不开

    Question 重启开机后显示桌面打不开: 再次重启后无效 Solution 打开注册表regedit如下路径,复制Desktop值到 同路径下的Desktop中,再重启.

  6. SQL学习笔记---常用命令

    常用命令 变量 1.声明 declare @变量名 类型,… 2.赋值 1.同时赋值多个变量(可以结合查询) select @变量名=表达式1,表达式2 2.单个赋值(推荐) set @变量名=表达式 ...

  7. Python运算符之翩若惊鸿，婉若游龙

    python中的运算符算术运算符:主要用于两个对象算数计算(加减乘除等运算)比较运算符:用于两个对象比较(判断是否相等.大于等运算)赋值运算符:用于对象的赋值,将运算符右边的值(或计算结果)赋给运算符 ...

  8. CADisplayLink以及定时器的使用

    第一种: 用CADisplayLink可以实现不停重绘. - (CADisplayLink *)link { if (!_link) { // 创建定时器,一秒钟调用rotation方法60次 _li ...

  9. python3 Queue（单向队列）

    创建队列 import queue q = queue.Queue() empty(如果队列为空,返回True) import queue q = queue.Queue() print(q.empt ...

  10. netstat简介

    netstat是一个监控TCP/IP网络的非常有用的工具,它可以显示路由表,实际的网络连接以及每一个网络接口设备的状态信息,netstat用于显示与IP,TCP,UDP和ICMP协议相关的统计数据,一 ...