用js内置对象XMLHttpRequest 来用ajax
步骤:
/* 用XMLHTTPRequest来进行ajax异步数据交交互*/
主要有几个步骤:
//1.创建XMLHTTPRequest对象
//最复杂的一步
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的bug进行修正。
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType('text/xml');
};
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2.注册回调函数
xmlhttp.onreadystatechange = callback;
//3.设置连接信息。
//open第一个参数链接方式,第二是url地址
//3,true是异步链接
//xmlhttp.open("GET","xhr.php?name=" + username,true);
//使用post方式发送数据
xmlhttp.open("POST","xhr.php",true);
//post需要自己设置http的请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4,发送数据,开始和服务器进行交互
//中如果true, send这句话会立即执行
//如果是false(同步),send会在服务器数据回来才执行
//xmlhttp.send(null);
//因为是get所以send中不需要内容
xmlhttp.send('name=' +username);
}
//5.写回调函数,不同相应状态进行处理
function callback(){
alert(xmlhttp.readyState);
//判断对象状态是交互完成,接收服务器返回的数据
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//["dada","xiaoyin","liujie"]
//纯文本的数据
var responseText = xmlhttp.responseText;
var divNode = document.getElementById('result');
//6.将服务器的数据显示在客户端
divNode.innerHTML = responseText;
}
}
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XHR</title>
<link rel="stylesheet" href="../templates/css/verify.css">
</head>
<body> <input type="text" id="username"><input type="button" value="提交" onclick="dadaHttpRequest()">
<div class="box" id="box"></div>
<script type="text/javascript" src="../templates/js/jquery.js"></script>
<script> /* 用XMLHTTPRequest来进行ajax异步数据交交互*/
//1.创建XMLHTTPRequest对象
var xmlhttp;
//最复杂的一步
function dadaHttpRequest(){
var username = document.getElementById('username').value;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest; //针对某些特定版本的mozillar浏览器的bug进行修正。
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType('text/xml');
}; } else if (window.ActiveXObject){
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}; //2.注册回调函数
//onreadystatechange是每次 readyState 属性改变的时候调用的事件句柄函数。
xmlhttp.onreadystatechange = callback; //3.设置连接信息
//初始化HTTP请求参数,但是并不发送请求。
//第一个参数连接方式,第二是url地址,第三个true是异步连接,默认是异步
xmlhttp.open("GET","xhr.php?name="+username,true); /*******************************************/
/*如果是xmlhttp.open("GET","xhr.php",true);*/
/* xmlhttp.send('name=' +username); */
/* 不行的 */
/*******************************************/ //使用post方式发送数据
//xmlhttp.open("POST","xhr.php",true);
//post需要自己设置http的请求头
//xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4,发送数据,开始和服务器进行交互
//发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求体。
//中如果true, send这句话会立即执行
//如果是false(同步),send会在服务器数据回来才执行
xmlhttp.send(null);
//因为是get所以send中不需要内容
//xmlhttp.send('name=' +username); } //5回调函数,不同相应状态进行处理
function callback(){
//alert(xmlhttp.readyState);
//判断对象状态是交互完成,接收服务器返回的数据
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//["dada","xiaoyin","liujie"]
//纯文本的数据
var responseText = xmlhttp.responseText;
var divNode = document.getElementById('box');
//6.将服务器的数据显示在客户端
divNode.innerHTML = responseText;
}
}
</script>
</body>
用js内置对象XMLHttpRequest 来用ajax的更多相关文章
- 4月5日--课堂笔记--JS内置对象
JavaScript 4.5 一. JS内置对象 1.数组Array a)创建语法1:var arr=new Array(参数); i. 没有参数:创建一个初始容量为0的数组 ii. ...
- JS内置对象有哪些?
JS内置对象分为数据封装类对象和其他对象 数据封装类对象:String,Boolean,Number,Array,和Object; 其他对象:Function,Arguments,Math,Date, ...
- JS内置对象-String对象、Date日期对象、Array数组对象、Math对象
一.JavaScript中的所有事物都是对象:字符串.数组.数值.函数... 1.每个对象带有属性和方法 JavaScript允许自定义对象 2.自定义对象 a.定义并创建对象实例 b.使用函数来定义 ...
- 5月15日上课笔记-js中 location对象的属性、document对象、js内置对象、Date事件对象、
location的属性: host: 返回当前主机名和端口号 定时函数: setTimeout( ) setInterval() 二.document对象 getElementById(); 根据ID ...
- JS内置对象的原型不能重定义?只能动态添加属性或方法?
昨天马上就快下班了,坐在我对面的同事突然问我一个问题,我说“爱过”,哈哈,开个玩笑.情况是这样的,他发现JS的内置对象的原型好像不能通过字面量对象的形式进行覆盖, 只能动态的为内置对象的原型添加属性或 ...
- js课程 3-9 js内置对象定时器和超时器怎么使用
js课程 3-9 js内置对象定时器和超时器怎么使用 一.总结 一句话总结:定时器: 1.定义 sobj=setInterval(func,1000); 2.清除 cl ...
- js课程 2-8 js内置对象有哪些
js课程 2-8 js内置对象有哪些 一.总结 一句话总结:JS中内置了17个对象,常用的是Array对象.Date对象.正则表达式对象.string对象.Global对象. 1.js常用对象有哪些? ...
- JS 内置对象 String对象
JS内置对象 String对象:字符串对象,提供了对字符串进行操作的属性和方法. Array对象:数组对象,提供了数组操作方面的属性和方法. Date对象:日期时间对象,可以获取系统的日期 ...
- web前端学习(四)JavaScript学习笔记部分(6)-- js内置对象
1.JS内置对象-什么是对象 1.1.什么是对象: JavaScript中的所有事物都是对象:字符串.数值.数组.函数 每个对象带有属性和方法 JavaScript允许自定义对象 1.2.自定义对象: ...
随机推荐
- Spring MVC异常处理详解 ExceptionHandler good
@ControllerAdvice(basePackageClasses = AcmeController.class) public class AcmeControllerAdvice exten ...
- Blender 界面操作
1.旋转场景 使用鼠标中间键旋转整个场景.按住Shift键,再操作鼠标中间键则可平移整个场景. 2.数字键盘功能 数字键盘1.3.7,分别控制场景向前.向后.向上显示. 数字键盘5,可以在正射投影(O ...
- 5 -- Hibernate的基本用法 --2 1 Hibernate 下载和安装
1. 下载Hibernate压缩包 2. 解压:文件结构 ⊙ documentation : 该路径下存放了Hibernate的相关文档,包括Hibernate的参考文档和API文档等. ⊙ lib ...
- 8 -- 深入使用Spring -- 1...4 属性占位符配置器
8.1.4 属性占位符配置器 PropertyPlaceholderConfigurer 是一个容器后处理器,负责读取Properties属性文件里的属性值,并将这些属性值设置成Spring配置文件的 ...
- RESTful状态码说明
https://www.zhihu.com/question/58686782/answer/159603453 常用状态码: 200 请求成功并返回所需资源 400 客户端请求有语法错误 401 未 ...
- CreateThreadpoolIo 函数小记
函数原型如下: PTP_IO WINAPI CreateThreadpoolIo( _In_ HANDLE fl, _In_ PTP_WIN32_IO_CALLBACK pfnio, _Inout_o ...
- OpenGL 知识二
OpenGL综述 September 14, 2014 学习OpenGL是学习计算机图形学的一个工具,因为计算机上图形的显示要依靠底层的软件和硬件,学习图形学除了学习基本的概念,线,曲面,图形生成,变 ...
- 【Android】Android中如何取消调转界面后EditText默认获取聚焦问题
参考资料: https://www.cnblogs.com/dream-cichan/p/aaaa.html http://blog.csdn.net/u013703461/article/detai ...
- java的对象锁和类锁
在java编程中,经常需要用到同步,而用得最多的也许是synchronized关键字了,下面看看这个关键字的用法. 因为synchronized关键字涉及到锁的概念,所以先来了解一些相关的锁知识. j ...
- Weblogic(CVE-2017-10271)漏洞复现
WebLogic XMLDecoder反序列化漏洞(CVE-2017-10271) 漏洞编号:CVE-2017-10271 漏洞描述:WebLogic WLS组件中存在CVE-2017-10271远程 ...