Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法

1 什么是ajax

  ajax是一种用来改善用户体验的技术,其本质是利用浏览器提供的一个对象(XMLHttpRequest,也可称之为ajax对象) 向服务器发送异步请求;服务器返回部分数据(不是一个完整 的页面),浏览器利用这些数据对当前页面做部分更新; 整个过程,页面无刷新,不打断用户的操作。

  

  注意1:异步请求,指的是,当ajax对象发请求时,浏览器不会销毁当前页面,用户仍然可以对当前页面做其它的操作。

  

  注意2:打电话可以看成是同步请求,发短信可以看成是异步请求

  注意3:AJAX 不是一门的新的语言,而是对现有技术的综合利用;本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

  

2 如何获取ajax对象

  

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>获取ajax对象</title>
 6     <script type="text/javascript">
 7         // 用该函数来获取ajax对象
 8         function getXhr() {
 9             var xhr = null;
10             if(window.XMLHttpRequest) {
11                 // 非IE浏览器的获取方式
12                 xhr = new XMLHttpRequest();
13             }else {
14                 // IE浏览器的获取方式
15                 xhr = new ActiveXObject(‘Microsoft.XMLHttp‘);
16             }
17             return xhr;
18         }
19     </script>
20 </head>
21 <body style="font-size:30px;">
22     <a href="javascript:alert(getXhr());">点击弹出ajax对象</a>
23 </body>
24 </html>

获取ajax对象源代码

3 ajax对象的几个重要属性

  a. onreadystatechange:绑订一个事件处理函数, 该函数用来处理readystatechange事件。
    注:当ajax对象的readystate属性值发生了改变, 比如,从0变成了1,则会产生readystatechange事件。
  b. readyState:有5个值(0,1,2,3,4),表示ajax对象与服务器通信的进展。其中,4表示ajax对象已经获得了服务器返回的所有的数据。
  c. responseText:获得服务器返回的文本数据。
  d. responseXML:获得服务器返回的xml数据。
  e. status:获得状态码。

4 使用ajax的编程步骤

  step1. 获得ajax对象。 
    比如 var xhr = getXhr(); 
  step2. 发送请求。
    方式一: get请求 
      xhr.open(‘get‘, ‘checkuname.do?uname=Sally‘,true); // 请求行

        参数1:请求方式

        参数2:请求地址【注意:get方式的请求参数写在地址后面】

        参数3:异步还是同步
          true:异步请求(默认是异步请求,二货才用ajax来实现同步请求【特殊情况除外】)
          false:同步请求(当ajax对象发送请求时,浏览器会锁 定当前页面,用户不能够对当前页面做任何操作)。

      xhr.onreadystatechange = f1;  // 绑定事件

      xhr.send(null); // 请求主体(实体内容)
    方式二: post请求 
      xhr.open(‘post‘,‘check
uname.do‘); // 请求行

      xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘); // 请求头

      xhr.onreadystatechange = f1; // 绑定事件

      xhr.send(‘uname=Sally‘); // 请求主体(实体内容)

        注意:按照http协议要求,如果发送的是post请求, 在请求数据包里面,应该包含有content-type消息头; 默认情况下,ajax对象不会添加该消息头,所以需要调用setRequestHeader方法来添加;但是如果是get请求方式的话就不用写;另外,表单的提交按钮会自动帮我们加这个消息头,所以我们不用写;但是这里我们必须自己写。

   step3. 编写服务器端的程序。通过只需要返回部分数据(不再需要返回完整的页面)。
   step4. 写事件处理函数。
     例如【伪代码】: 
      function f1() {

        if(xhr.readyState == 4 && xhr.status == 200) {

           //获得服务器返回的数据

          var txt = xhr.responseText;

          //更新页面 ...

        }

      }

时间: 2024-10-22 09:31:50

Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法的相关文章

javascript错误:对象不支持此属性或方法

javascript错误:对象不支持此属性或方法 出现如上错误的原因主要有以下两种: 1.方法对应的JS函数未定义 2.属性所用的id名字跟函数名相同也会报此错误,id或函数名改个地方即可.

关于对象、类、属性和方法的理解

文章开头申明:半路出家的野路子,可能个人理解有所欠缺,希望不吝赐教. 在初步学习java的过程中,往往都是绕不开面向对象的思想,说到对象或许挺多初学者和我一样只是听说过一个"万物皆对象"的说法,简单的记下对象包含属性和方法,然而实际使用的过程中往往有忽略这些东西,也就是犯浑了.个人的理解是希望将对象.类.属性和方法用一个例子来简单说明. 打个比方说我到商场买手机这个例子吧.我到了商场买手机,第一步自然就是向售货员提出我的要求:如手机大小.CPU.内存等等(属性),要求能拍照打电话首发短

ie7/8浏览器报错:对象不支持&ldquo;trim&rdquo;属性或方法

解决方法: 方法1: 使用jquery里面的全局函数$.trim()代替原生js方法trim(): $.trim( 你要替换的字符 ); 方法2: Function.prototype.method = function (name, func) { this.prototype[name] = func; return this; }; if (!String.prototype.trim) { //判断下浏览器是否自带有trim()方法 String.method('trim', funct

关于使用jquery时,ie8下提示对象不支持的属性或方法的解决办法

转自:http://wapapp.baidu.com/auoong/item/538790fcbe87c834d7ff8cde 首先这个问题的前提是已经排除了常见的这个问题.下面说一种今天我碰到的一种情况. 浏览器报的错误: 1.在xp/win7系统下安装的是ie8的报的错误是:对象不支持此属性与方法. 2.在win8下报的错误是:对象不支持"toLowerCase"属性或方法,即使是调整成ie8模式也是这个错误. 出错的代码段为jquery的源代码,如下: var b=a.nodeN

js数组对象以及数组常用属性和方法

定义形式: var  arr1 = new Array(1,  5,  8,  7,  2,  10);  //定义了一个数组,其中具有6个数据 var  arr2 = new Array();                   //只是单纯地定义了一个数组(名),但没有给值(数据),即现在是空的 var  arr3 = [1,  5,  8,  7,  2,  10];  //同arr1,只是一种简写的定义法. var  arr4 = [ ];                  //同arr

jmail组件 对象不支持此属性或方法: &#39;JMail.ServerAddress&#39; 的解决办法

jmail组件是asp最常用的邮件发送工具,自己有一个网站,已经使用这个jmail组件有8年了,但不知道为什么在12号突然出现无法正常发送邮件的问题, 后来经过测试代码,发现IIS报的错误为:对象不支持此属性或方法: 'JMail.ServerAddress',遇到不明白的,当然就是先度娘了,百度了2天都没有发现有相同错误的案例及解决的办法, 我的代码如下: Dim JMail Set JMail=Server.CreateObject("JMail.Message") if err

对象不支持“abigimage”属性或方法

在一个网页中用了一个js插件, js文件引用的没有错,代码也和demo差不多,  但是运行时ie的调试工具报了一个错: 解决方案: jquery文件冲突,发现原来自己引过一个 <script src="js/jquery-1.11.0.min.js"></script>  , 这里又引入了一个 <script type="text/javascript" src="js/jquery-2.0.3.min.js">

jquery1.8 在IE8 下面报错:对象不支持此属性或方法 return b.getAttribute(&quot;id&quot;)===a

jquery1.8 在IE8 下面报错: 对象不支持此属性或方法 调试发现是下面这一行报错: 在IE8下面报错,在chrome和firefox都是好的. 实在找不到原因,最后把源码改成下面这样: 没有报错了. 更好的方法,应该可以先 判断 elem 对象是否有 getAttribute() 这个函数,如果没有就是有 eleem["id"] 来代替.

解决IE10以下对象不支持“bind”属性或方法

IE10一下的浏览器,如果在JS代码中用了bind函数,那么就会报“SCRIPT438: 对象不支持“bind”属性或方法” 因为浏览器没有提供这个参数的方法,所以我们就自己写一个bind,来让这个参数生效. //解决IE10以下不支持Function.bind if (!Function.prototype.bind) { Function.prototype.bind = function(oThis) { if (typeof this !== "function") { thr

解决对象不支持“getElementsByClassName”属性或方法 ie兼容性

  解决 IE 或者兼容模式不支持 document.getElementsByClassName() 的方法 自已实现document.getElementsByClassName(): 网页错误详细信息消息: 对象不支持此属性或方法 document.getElementsByClassName('element_name') 需要自己实现下该方法,因为ie5之前的版本并不支持这个方法 有以下四种方法,第四种兼容性最好  一. [javascript] view plaincopy   //