原生 ajax

1.创建XMLHttpRequest对象

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

2.发送请求

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/demo_get.asp?t=" + Math.random(),true);//清除缓存
xmlhttp.send();
}

3.响应

如果来自服务器的响应并非 XML,请使用 responseText 属性。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

4.XMLHttpRequest对象有以下属性:
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
status
200: "OK"

404: 未找到页面

原生 ajax,布布扣,bubuko.com

时间: 2024-08-12 05:30:40

原生 ajax的相关文章

jQuery_review之 原生Ajax的写法

最低层的ajax的实现是基于浏览器的一个标准,就是XMLHttpRequest对象,这种对象在MS浏览器上面的实现与其他浏览器上面的实现是不一样的.尽管现在非常多的第三方框架采用"模板模式"封装了如何获取XMLHttpRequest对象以及如何发送和处理中间出现的异常,但是还是非常有必要对ajax进行一次复习,这样才能在看其他的方法的时候温故而知新的效果. 编写原生的ajax的代码,需要需要采用的步骤是,首先,我们应当在function中定义一个XMLHttpRequest的变量对象,

JS原生Ajax请求

摘录一个JS原生Ajax请求行为,原文地址:http://caibaojian.com/ajax-jsonp.html ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 }, //请求参数 dataType: "json", success: function (response, xml) { //

原生ajax基础知识笔记

原生ajax基础知识笔记 1.创建 XMLHttpRequest 对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHttpRequest 对象. 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveXObject. 代码示例: // Creates a XMLHttpRequest object. var xhr = new XMLHttpRequest(); 兼容浏览器代码示例: var xhr; /

JavaScript的原生Ajax解析

通过JavaScript的Ajax进行详细的解析过程,从而更好的了解Jquery的Ajax. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百度云下载,这样以后你们开发就可以直接翻笔记不用百度搜那么麻烦了.  笔记链接:http://pan.baidu.com/s/1qYdQdKK 密码:pvj2   一.JavaScript原生ajax1.原生ajax代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

原生Ajax 和Jq Ajax

前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的位置.打开时,在浏览器地址栏输入"localhost/指定页面"或者"127.0.0.1/指定页面"打开. 下面列出demo的HTML.PHP.原生ajax .jq ajax代码. HTML代码: <!doctype html> <html> &

原生Ajax实现异步通信

昨天我们用JQuery.Ajax讲解了JQuery如何通过Ajax实现异步通信,为了更好的编织知识网,今天我们用一个Demo演示如何用javascript实现原生Ajax的异步通信. 原生Ajax实现异步通信分为以下5步: 1.创建XMLHttpRequest对象: 2.注册回调方法: 3.设置和服务器端交互的参数 4.设置向服务器端发送的数据,启动和服务器端的交互: 5.写回调方法 有了这5步的思想指导,下面我们开始设计实现过程. 首先我们新建一个html页面,用于和用户交互,代码如下: <!

原生ajax与封装的ajax使用方法

当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考http://www.cnblogs.com/heyujun-/p/6793900.html网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'

JavaWEB小知识学习--原生AJAX

AJAX的作用局部刷新,作为提升页面体验还是很重要的,不过大家都说对SEO不是很友好,一直使用jQuery封装的AJAX,没有了解过原生的是什么样子的,特此学习下,补充知识 1.原生AJAX的Get方式 页面中定义一个a标签.想要实现的效果点击a标签,能够请求服务器,弹出服务器返回的字段 <body> <a href="/ajaxTest">点击我!</a> </body> 对应的AJAX请求如下,注释步骤很详细的 //具体的函数可以参考

原生ajax调用数据简单实例代码

原生ajax调用数据简单实例代码:由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的ajax有所了解的好,下面就是一段ajax数据调用的实例代码,非常的简单,初学者可以参考一下.代码如下:一.兼容浏览器部分: function xmlHttpR() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=ne