用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.自定义对象: ...
随机推荐
- web_submit_data详解
定义:处理无状态或者上下文无关的表单提交.它用来生成表单的GET或POST请求,这些请求与Form自动生成的请求是一样的,发送这些请求时不需要表单上下文. 函数形式:web_submit_data( ...
- 深入理解Java虚拟机（一）
一.运行时数据区域 1.程序计数器: 当前线程执行字节码的行号指示器(通过改变计数器的值来选择下条需要执行的字节码指令) 每个线程有独立的程序计数器(线程私有,为了切换线程时能恢复到挣钱的执行位置 ...
- QT编译错误：cannot find file: *.pro
编译一个之前同事写的QT程序,结果出现了编译错误:cannot find file: *.pro 解决方法:将程序放在英文路径下 尽管出现一些红色的编译信息部门,但是最终还算是编译成功了~
- 百度云高速下载Pandownload
对于一些文件大小比较小的文件,可以直接在网页分享中点击[下载]来下载: 但是,对于较大点的文件,点击[下载]会弹出百度云的桌面客户端软件来下载: 但但是,下载速度实在是太慢了,强迫症真真等不及啊~ 幸 ...
- python修改python unittest的运行顺序
正常是一个测试类中按函数名字运行, 下面修改成直接按每个测试方法的代码顺序执行 文件 unittest_util.py import time import unittest from app.uti ...
- jsoup Cookbook(中文版)-Jsoup解析HTML
jsoup Cookbook(中文版) 入门 1. 解析和遍历一个html文档 如何解析一个HTML文档: String html = "<html><head& ...
- 7 -- Spring的基本用法 -- 8... 抽象Bean与子Bean；Bean继承与Java继承的区别；容器中的工厂Bean；获得Bean本身的id；强制初始化Bean
7.8 深入理解容器中的Bean 7.8.1 抽象Bean与子Bean 把多个<bean.../>配置中相同的信息提取出来,集中成配置模版------这个配置模版并不是真正的Bean,因此 ...
- 车牌、手机、身份证、等敏感信息 屏蔽 替换 、中文转unicode编码 函数
应工作要求,需要对展示的内容进行敏感信息替换.琢磨的一些时间,编写的函数匹配率还是比较高的. 顺便说下思路,使用的是正则匹配替换和字符串替换.函数可以再改进. 先把需要匹配的内容写好相应的正则,然后进 ...
- iOS开发-修改UITableViewCell中image和title的位置和大小
最近在开发中遇到需要Cell中imageView和textLable位置和大小的情况,设计希望得到的结果如下图所示: 而TableViewCell默认样式,image是靠紧左边的,并且image和ti ...
- Git 学习笔记--Git下的冲突解决
冲突的产生 很多命令都可能出现冲突,但从根本上来讲,都是merge 和 patch(应用补丁)时产生冲突. 而rebase就是重新设置基准,然后应用补丁的过程,所以也会冲突. git pull会自动m ...