使用ajax首先定义个XMLHttpRequest变量,为了判断对IE6以及以下版本的兼容性,需要
var xmlHR;
        if (window.XMLHttpRequest) {
                xmlHR = new XMLHttpRequest();
        }else{
                        xmlHR = new ActiveXObject("Microsoft.XMLHTTP");
        }
XMLHttpRequest对象的常用属性和方法有:
XMLHttpRequest 对象的三个常用的属性:

1. onreadystatechange 属性
onreadystatechange 属性存有处理服务器响应的函数。

下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行设置:

xmlHR.onreadystatechange=function()
  {
  // 我们需要在这里写一些代码
  }
2.readyState 属性
readyState 属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。

readyState 属性可能的值:

状态   描述 
0       请求未初始化(在调用 open() 之前) 
1       请求已提出(调用 send() 之前) 
2       请求已发送(这里通常可以从响应得到内容头部) 
3       请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应) 
4       请求已完成(可以访问服务器响应并使用它)

我们要向这个 onreadystatechange 函数添加一条 If 语句,来测试我们的响应是否已完成(意味着可获得数据):

xmlHR.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    // 从服务器的response获得数据
    }
  }
3.responseText 属性
可以通过 responseText 属性来取回由服务器返回的数据。

在我们的代码中,我们将把时间文本框的值设置为等于 responseText:

xmlHR.onreadystatechange=function()
  {
  if(xmlHR.readyState==4)
    {
    document.myForm.time.value=xmlHttp.responseText;
    }
  }

xmlHttpRequst的方法

1.open() 方法

open() 有三个参数。第一个参数定义发送请求所使用的方法,第二个参数规定服务器端脚本的URL,第三个参数规定应当对请求进行异步地处理。

xmlHR.open("GET","test.php",true);

2.send() 方法

send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录,那么代码是这样的:

xmlHR.send(null);

XMLHttpRequest的ajax使用一般步骤
open(“GET”或“POST”)    setRequestHeader ("Content-type","application/x-www-form-encoded")       send        onreadystatechange

JavaScript的ajax使用的更多相关文章

  1. 最新JavaScript、Ajax典藏级学习资料下载分类汇总 (2011年12月21日更新)

    其他网站开发相关资料            超强HTML和xhtml,CSS精品学习资料下载汇总                                               最新htm ...

  2. 初识JavaScript,Ajax,jQuery,并比较三者关系

    一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...

  3. JavaScript实现Ajax小结

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<TCP的三次握手和四次挥手> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临 ...

  4. 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求

    转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...

  5. javascript版Ajax请求

    什么是Ajax请求,Ajax也就是“Asynchronous JavaScript and XML”(异步JavaScript和XML),无刷新数据读取.能减少流量的消耗,也提高了浏览的流畅性,给用户 ...

  6. Javascript与Ajax

    不使用jquery来处理ajax请求该怎么做? 首先要明确html中的某些数据需要从服务端获得,也就是客户端向服务端请求(request)数据,服务端就响应(response)这个请求,把客户端要的数 ...

  7. javascript进阶——Ajax

    统的Web 页面和应用中,用户每点击页面上的某个部分,浏览器就会向服务器发出一个请求,等待服务器做出响应,然后返回一个完整新网页,但在大多数情况下用户不得不忍受页面闪烁和长时间的等待.随着Web技术的 ...

  8. Javascript and AJAX with Yii(在yii 中使用 javascript 和ajax)

    英文原文:http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii /*** http://www.yiiframework. ...

  9. javascript实现ajax

    什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...

  10. JavaScript和ajax 跨域的案例

    今天突然想看下JavaScript和ajax 跨域问题,然后百度看了一下,写一个demo出来 <!DOCTYPE html> <html xmlns="http://www ...

随机推荐

  1. C#应用程序隐藏调用bat脚本

    做c#应用程序有些调用windows自带的bat脚本会比较方便 Process proc; proc = null; try { string targetDir = GetParentUrl() + ...

  2. 分组查询限制。HAVING可写在GROUP BY前。

    限制一.无GROUP BY时统计函数不能和字段同时出现: 限制二.有GROUP BY时字段部分只能出现分组的字段: 限制三.统计函数嵌套时不能有字段.

  3. ES6之Proxy及Proxy内置方法

    Proxy是ES6提供的代理器可以起到拦截作用,写法形式如 var proxy = new Proxy(target,handler);参数target表示要拦截的目标对象,handler是用来定制拦 ...

  4. 《Django By Example》Chap 4中出现的 “RelatedObjectDoesNotExist”错误

    models.py

  5. python自动生成excel报表

    1.将SQL语句查询的内容,直接写入到excel报表中,以下为全部脚本.要求:此版本必须运维在windows平台,并且安装了excel程序,excel版本不限. python版本为2.7 if b 判 ...

  6. Handwritten Parsers & Lexers in Go (Gopher Academy Blog)

    Handwritten Parsers & Lexers in Go (原文地址  https://blog.gopheracademy.com/advent-2014/parsers-lex ...

  7. 微信公众号H5支付遇到的那些坑

    简史 官方文档说的很清楚,商户已有H5商城网站,用户通过消息或扫描二维码在微信内打开网页时,可以调用微信支付完成下单购买的流程. 当然,最近微信支付平台也加入了纯H5支付,也就是说用户可以在微信以外的 ...

  8. 利用伪元素:after清除浮动

    一.代码 html代码 <div class="clearfix"></div> css样式 .clearfix{ zoom:1;/*这个属性是为了兼容IE ...

  9. ADO.NET访问数据库

    1:ADO.NET数据库的方法和技术 2:ADO.NET的主要组成: 1>DataSet(数据集)-----独立于数据间的数据访问 2>.NETFramework(数据提供程序)----- ...

  10. angular4.0中form表单双向数据绑定正确姿势

    issue:用[(ngModel)]="property"指令双向数据绑定,报错. reason1:使用ngModel绑定数据需要注入FormsModule模块,在app.modu ...