js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原 生的Ajax完成异步操作，有如下几个步骤：

1）创建Ajax引擎对象

2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）

3）绑定提交地址

4）发送请求

5）接受响应数据

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

	function fn1(){

		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象

		var xmlHttp = new XMLHttpRequest();

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

		xmlHttp.onreadystatechange = function(){

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

				//5、接受相应数据

				var res = xmlHttp.responseText;

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

			}

		}

		//3、绑定地址

		xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);

		//4、发送请求

		xmlHttp.send();

	}

	function fn2(){

		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象

		var xmlHttp = new XMLHttpRequest();

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

		xmlHttp.onreadystatechange = function(){

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

				//5、接受相应数据

				var res = xmlHttp.responseText;

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

			}

		}

		//3、绑定地址

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

		//4、发送请求

		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

		xmlHttp.send("name=wangwu");

	}

</script>

</head>

<body>

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

	<br>

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

	<br>

	<input type="button" value="测试按钮" onclick="alert()">

</body>

</html>

　　注意：

注意：如果是post提交

在发送请求之前设置一个头

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

　　get请求的请求参数在open（如fn1中的参数传递方法）中或send中都可以（如fn2中的参数传递方法）

js原生的Ajax的更多相关文章

  1. JS原生Ajax&Jquery的Ajax技术&Json

    1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...

  2. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  3. ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题

    问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...

  4. JS原生ajax

    原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...

  5. JS原生对象实现异步请求以及JQ的ajax请求四种方式

    一.JS原生方式异步请求 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="A ...

  6. Node.js原生及Express方法实现注册登录原理

    由于本文只是实现其原理,所以没有使用数据库,只是在js里面模拟数据库,当然是种中还是需要用数据库的. 1.node.js原生方法 ①html页面,非常简单,没有一丝美化~我们叫它user.html & ...

  7. 认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法

    (一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...

  8. JS原生实现视频弹幕Demo（仿）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. 原生javascript AJAX 三级联动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Windows原理深入学习系列-特权

    这是[信安成长计划]的第 21 篇文章 0x00 目录 0x01 介绍 0x02 结构分析 0x03 进程注入测试 0x04 参考文章 0x01 介绍 在 Token 当中还存在一个特别重要的内容-- ...

  2. 矩池云利用ipykernel为JupyterLab添加kernel以及展示出来

    source activate myconda pip install ipykernel python -m ipykernel install --user --name myconda --di ...

  3. SpringCloudStream(RabbitMQ&Kafka)&Spring-Kafka配置使用

    目录 是什么 解决问题 使用方式 创建生产者项目 pom yml 生产消息方法 接口 实现 创建消费者项目 pom yml 接收消息方法 重复消费 消费者yml 持久化 消费者负载个性配置(预拉取) ...

  4. python链接mqtt订阅与发布

    什么是mqtt: MQTT 全称为 Message Queuing Telemetry Transport(消息队列遥测传输)是一种基于发布/订阅范式的"轻量级"消息协议.该协议构 ...

  5. 前面顺序表的补充（复杂度，未实现的算法，空间扩展）（基于c语言）

    0.对于顺序表中的n个元素,如果在下标i的位置之前插入一个元素,则需要将后面n-i个元素向后移动一位:如果是删除下标为i处的元素,则是则需要将后面n-i-1个元素向前移动一位.如果说在i的位置插入和删 ...

  6. 阿里云开源镜像站支持IPv6访问

    阿里云开源镜像站在国内企业镜像站中率先支持IPv6访问! 点击立即试用https://developer.aliyun.com/mirror/ 同时基于阿里云OpenSearch的搜索能力,开源镜像站 ...

  7. 4月16日 python学习总结 封装之property、多态 、classmethod和staticmethod

    一.封装之property @property把一个函数伪装成一个数据类型  @伪装成数据的函数名.setter   控制该数据的修改,修改该数据时触发 @伪装成数据的函数名.delect  控制该数 ...

  8. 痞子衡嵌入式：IAR内部C-SPY调试组件配套宏文件(.mac)用法介绍

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是IAR内部C-SPY调试组件配套宏文件(.mac)用法. 痞子衡之前写过一篇 <JLink Script文件基础及其在IAR下调用 ...

  9. SVPWM实现概述

    SVPWM是FOC的基础,其实现流程大致如下所示: 1. 判断合成矢量所在扇区 2. 计算相邻矢量作用时间 3. 计算各桥臂导通时间 4. 得到各相PWM占空比 5. 更新相应寄存器值  SVPWM目 ...

  10. C++设计模式 - 命令模式（Command）

    行为变化模式 在组件的构建过程中,组件行为的变化经常导致组件本身剧烈的变化."行为变化" 模式将组件的行为和组件本身进行解耦,从而支持组件行为的变化,实现两者之间的松耦合. 典型模 ...