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. out与err输出流

    System.in.System.out与System.err 当我们查阅文档可知,out与err都是Java中的输出流,in是"标准"输入流,System.out是"标 ...

  2. 对element-ui的table组件的二次封装

    首先,使用过element-ui的table组建的同学都知道,每次使用的时候表头字段都要一个一个的去写,写起来很麻烦,既不美观又浪费时间,基于以上原因,对table组件进行二次封装,使我们在使用的时候 ...

  3. 专业3 Cookie 和Session的使用及原理

    Cookie的使用及原理 什么是cookie cookie是一种用来跟踪和识别用户上网信息的会话控制技术,它将跟踪后的信息存储在客户端的浏览器上 cookie如何使用 第一步:设置cookie即可(告 ...

  4. Java GUI 实现发送邮件以及附件

    实现代码: 注意点: 需要的jar包:JavaMail API 和Java Activation Framework (JAF) ,下载可参考菜鸟教程 默认使用QQ邮箱发送,需要设置授权,设置--&g ...

  5. 用 EXISTS 或 NOT EXISTS 用法

    项目中遇到这么个情况: t1表 和 t2表  都是150w条数据,600M的样子,都不算大. 但是这样一句查询 ↓ select * from t1 where phone not in (selec ...

  6. 初学者都能学会的ElasticSearch入门实战

    大家好,我是咔咔 不期速成,日拱一卒 项目中准备使用ElasticSearch,之前只是对ElasticSearch有过简单的了解没有系统的学习,本系列文章将从基础的学习再到深入的使用. 咔咔之前写了 ...

  7. SQL语句优化、mysql不走索引的原因、数据库索引的设计原则

    SQL语句优化 1 企业SQL优化思路 1.把一个大的不使用索引的SQL语句按照功能进行拆分 2.长的SQL语句无法使用索引,能不能变成2条短的SQL语句让它分别使用上索引. 3.对SQL语句功能的拆 ...

  8. python练习册 每天一个小程序 第0001题

    1 # -*-coding:utf-8-*- 2 __author__ = 'Deen' 3 ''' 4 题目描述: 5 做为 Apple Store App 独立开发者,你要搞限时促销,为你的应用生 ...

  9. 添加ico图标

    1. 先添加资源文件XXX.Ico,然后引用的时候用如下代码即可. Icon ico=Properties.Resources.XXX;

  10. 西门子S7-1200PLC不让下载一直报“模块具有激活的测试和调试功能，防止下载到设备”解决方法

    错误如图 这是因为PLC被强制了,导致下载会报这类错误.取消强制就可以下载. 或者将cpu重置为出厂设置,也能再次下载. 参考:https://www.ad.siemens.com.cn/servic ...