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设计模式——开篇

    设计模式很重要,重要性我就不再复述了.最主要的是,通常我们在写一定量代码后,常用的方法什么的都熟悉后,想再提高代码能力,我找到的最好的方法还是去学习,理解设计模式.不理解设计模式,看一些开源框架和ja ...

  2. js 数组随机洗牌

    //先定义一个某数值范围内的随机数 function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1) + ...

  3. 键盘上的"整蛊专家"，如何防止短信轰炸机

    "短信轰炸机",是别人通过爬虫或者其他抓取手段在网路上收集那些公司平台短信业务接口的一个集成程序,可能只需要输入一个手机号,对方一整天都会收到各大平台的注册或提醒短信,就是手机在那 ...

  4. Python_实现json数据的jsonPath(精简版)定位及增删改操作

    基于python实现json数据的jsonPath(精简版)定位及增删改操作   by:授客 QQ:1033553122 实践环境 win7 64 Python 3.4.0 代码 #-*- encod ...

  5. 从零学习Fluter(二):win10上环境搭建以及模拟器和真机调试

    今天呢,又继续看了flutter 弗拉特 的东西,绝的这个东西绝对是比ReactNative更高一层次的,在2018年12月5好,flutter的第一个stale1.0发布了,我们在GitHub上可以 ...

  6. virtual table for class

    虚函数表 说起虚函数,相信你我都可以自然而然的想到“多态”,因为多态的实现就依赖于虚函数的继承和重写(覆盖).那么,class又或者是object是如何来管理虚函数的呢?你我又会想到虚函数表. 虚函数 ...

  7. c#二进制移位运算符 "<<"及">>"，"&","|","^"

    移位运算符 & :按位与,其实与&&逻辑运算符有一致的地方: | :按位或,同样与||有类似的地方. ~:按位取反 ^:按位异或 <<:左移运算符 >> ...

  8. c/c++ 网络编程 使用getaddrinfo的单纯UDP 通信

    网络编程 使用getaddrinfo的单纯UDP 1,UDP发送端 2,UDP接收端 UDP发送端: #include <stdio.h> #include <unistd.h> ...

  9. UITableView编辑模式大全解

    1.UITableView 的编辑模式 进入编辑模式 代码体现 // 设置 editing 属性 tableView?.editing = true // 这个设置的时候是有动画效果的 tableVi ...

  10. Linux IO 模型

    Linux 中主要有五种IO模式:阻塞IO, 非阻塞IO, IO 多路复用,信号驱动IO和异步IO; 如果从同步非同步,阻塞非阻塞角度来看,又可以分为:同步阻塞IO, 同步非阻塞IO,异步阻塞IO和异 ...