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. 1列表展示的SQL，改为：只查询出vip会员，展示在页面上（10分）

    模型代码: //会员 public static function member(){ return self::where('status',1)->select(); } 控制器代码: // ...

  2. CentOS 7.5关闭FireWall 和SELinux图文详解

    CentOS 7.5关闭FireWall 和SELinux图文详解 1. 环境 CentOS 7.5 2. 关闭FireWall和SELinux 2.1 FireWall 使用systemctl st ...

  3. XSHELL的坑

    今天使用XSHELL连接虚拟机上的CENTOS7 ,刚开始还可以正常连接,后来再就连接不上. 检查了半天SSH服务都检查过了运行正常, 重启,检查配置文件. 都OK没问题就是连接不上,折腾半天还是不行 ...

  4. .NET Core剪裁器Zack.DotNetTrimmer升级瘦身引擎，并支持剪裁计划的录制和回放

    上周,我发布了对.NET Core程序进行瘦身的开源软件Zack.DotNetTrimmer,与.NET Core内置的剪裁器相比,Zack.DotNetTrimmer不仅对程序的剪裁效果更好,而且还 ...

  5. nf-Press —— 在线文档也可以加载组件和编写代码

    如果帮助文档可以加载组件,那么在介绍的同时就可以运行演示demo,是不是很酷? 如果可以在线修改运行代码,那么是不是更容易理解? 上一篇 https://www.cnblogs.com/jyk/p/1 ...

  6. 线程池的极简用法——内置线程池multiprocessing

    大家好,今天博主来分享一个线程池的小捷径--内置线程池的使用方法 一.背景 说道多线程,对变成层有了解的小伙伴一定不陌生,虽然不知道是什么但是也会从各大网站.面试分享等途径听说过.这里就不做过多的介绍 ...

  7. nexus3上传第三方jar包

    1.新建第三方仓库,名字叫3rd_part 2.添加到maven-public组中 3.修改maven的setting.xml 4.执行命令 mvn deploy:deploy-file -Dgrou ...

  8. 分布式 PostgreSQL 集群(Citus)，官方快速入门教程

    多租户应用程序 在本教程中,我们将使用示例广告分析数据集来演示如何使用 Citus 来支持您的多租户应用程序. 注意 本教程假设您已经安装并运行了 Citus. 如果您没有运行 Citus,则可以使用 ...

  9. Oneops运维系统

      背景:公司对接其他系统时都会将业务分为几大模块由不同的人员去开发部署.那么部署方式为传统方式登录服务器,然后操作.所以每次上线我们可能都需要等待别的同事操作完才能操作自己所负责的业务系统.针对以上 ...

  10. CentOS Stream 8 安装 Zabbix6.0 -- LNMP环境（nginx-1.20，mariadb-10.6，php-7.4）

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 zabbix6.0 LTS版本出来了,前段时间刚安装了5.4,今天打算在虚拟机上安装6.0测试,安装6.0的要求php版本不低于7.2,mariad ...