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. 2022年官网下安装MongoDB最全版与官网查阅方法（5.0.6）

    一.下载安装 1.百度搜索,找到官网,或直接访问:https://www.mongodb.com/ 2.寻找下载位置,双击下载. 3.找到本地位置,双击执行,进入欢迎界面,选择next. 4.勾选协议 ...

  2. LGP7704题解

    来一个特别暴力的做法. 首先,如果删掉 \(x\) 和 \(y\) 的效果一定和删掉 \(xy\) 的效果相同,且代价一定不大于后者. 于是我们只删除质数,题目就变成了寻找 \(i!(1 \leq i ...

  3. CVE-2018-12613phpMyAdmin 后台文件包含漏洞分析

    一.    漏洞背景 phpMyAdmin 是一个以PHP为基础,以Web-Base方式架构在网站主机上的MySQL的数据库管理工具,让管理者可用Web接口管理MySQL数据库.借由此Web接口可以成 ...

  4. 七天接手react项目 系列 —— react 脚手架创建项目

    其他章节请看: 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识,而真实项目通常是基于脚手架进行开发. 本篇首先通过 reac ...

  5. 040_Eureka 服务注册与发现

    目录 什么是Eureka 原理讲解 Eureka的基本架构 三大角色 盘点目前工程状况 创建Eureka服务端子模块 springcloud-eureka-7001 导入依赖 pom.xml 配置文件 ...

  6. idea如何打包项目，部署到linux后台运行

    服务器安装tomcat 上传好tomcat包 scp -r tomcat liwwww@111116.11222.101121.12111111:/opt/ linux下启动tomcat服务的命令   ...

  7. Spring bean 和单例bean的线程安全

    Bean的作用域 Spring 3中为Bean定义了5中作用域,分别为singleton(单例).prototype(原型).request.session和global session,5种作用域说 ...

  8. 请描述一下Struts2的值栈结构，以及它是如何工作的?

    值栈 Value Stack 值栈是Struts2框架的核心概念.所有的核心组件都以某种方式与之进行交互,它提供对上下文信息和执行环境中元素的访问机制.值栈的内容由如下4个层级组成. 1.临时对象 这 ...

  9. Spring Boot 的配置文件有哪几种格式？它们有什么区别？

    .properties 和 .yml,它们的区别主要是书写格式不同.    1).properties    app.user.name = javastack    2).yml    app:   ...

  10. Hadoop全分布式

    1.安装jdk      Linux下安装jdk-7u67-linux-x64.rpm 2.免密登录   ssl免密登录(centos6) 3.同步时间:date -s "2020-04-0 ...