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. 浏览器输入URL，按下回车后发生什么？

    大致流程 URL 解析 DNS 查询 TCP 连接 服务器处理请求 浏览器接受响应 浏览器解析渲染页面 断开连接

  2. AE初步

    AE开发就是我们常说的ArcEngine二次开发. 1.配置环境 目前来讲,稳定的版本配置,一般配置为VS2012+ArcEngine10.2. 安装ArcEngine时,安装图中三项即可,顺序为Ar ...

  3. Chrome浏览器打开图标显示空白

    复制下面命令存到.bat 文件中,并允许bat文件 taskkill /f /im explorer.exeattrib -h -i %userprofile%\AppData\Local\IconC ...

  4. C++ struct结构体内存对齐

    •小试牛刀 我们自定义两个结构体 A 和 B: struct A { char c1; char c2; int i; double d; }; struct B { char c1; int i; ...

  5. Linux 查询文件内容重复数 uniq、sort命令

    前提:uniq只能查询数据相邻的重复次数,而sort可以查询乱序的重复次数. 原谅我,以下内容都是复制菜鸟驿站的!!! Linux uniq 命令用于检查及删除文本文件中重复出现的行列,一般与 sor ...

  6. 玩转OpenMLDB社区，四张角色卡待解锁

    关于OpenMLDB OpenMLDB 是一个开源机器学习数据库,提供企业级 FeatureOps 全栈解决方案.OpenMLDB 致力于闭环解决 AI 工程化落地的数据治理难题,并且已经在上百个企业 ...

  7. python在json文件中提取IP和域名

    # qianxiao996精心制作 #博客地址:https://blog.csdn.net/qq_36374896 import re def openjson(path): f = open(pat ...

  8. 利用MSSQL getshell

    此次复现使用的sql server 2000 和sql server 2008两个环境进行的 是在已知数据库密码的基础上进行的 0x01 MSSQL连接 连接MSSQL 2000 新建连接: 填写目的 ...

  9. ubuntu 16.04 设置root用户初始密码

    安装ubuntu成功后,都是普通用户权限,并没有最高root权限,如果需要使用root权限的时候,通常都会在命令前面加上 sudo .有的时候感觉很麻烦- 我们一般使用su命令来直接切换到root用户 ...

  10. sql server 2000 单主键高效分页存储过程 (支持多字段排序)

    sql server 2000 单主键高效分页存储过程 (支持多字段排序) Create PROC P_viewPage             /*              nzperfect [ ...