目录

  1 什么是ajax

  2 获取ajax对象

  3 ajax对象的属性和方法

  4 使用ajax的编程步骤

  5 缓存问题

  6 乱码问题

什么是ajax

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

  

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

  

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

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

  

如何获取ajax对象

  

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取ajax对象</title>
<script type="text/javascript">
// 用该函数来获取ajax对象
function getXhr() {
var xhr = null;
if(window.XMLHttpRequest) {
// 非IE浏览器的获取方式
xhr = new XMLHttpRequest();
}else {
// IE浏览器的获取方式
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
</script>
</head>
<body style="font-size:30px;">
<a href="javascript:alert(getXhr());">点击弹出ajax对象</a>
</body>
</html>

获取ajax对象源代码

ajax对象的几个重要属性和方法

  3.1 属性

    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:获得状态码。

  3.2 方法

    open() :用于设置请求行

    setRequestHeader():用于设置请求头

    send():用于设置请求实体内容

  

使用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;

          //更新页面 ...

        }

      }

缓存问题  

  当使用ie浏览器时,ajax对象如果发送的是get请求, 会检查请求地址是否访问过,如果访问过,则不再发 送新的请求,而且显示之前访问过的结果。(也就是说,第一次访问请求时,会将结果缓存下来)。

  5.1 解决办法

    在请求地址后面添加一个随机数来欺骗ie浏览器,让其认为每次的请求地址都不一样

    例如:xhr.open("get", "/ajax01/random_number.do?" + Math.random(), true);

乱码问题

  浏览器乱码问题、服务器乱码问题;这两种乱码问题都是由浏览器和服务器编码不一致造成的

  6.1 浏览器发送get请求

    产生乱码的原因: 
      ie浏览器默认使用gbk对中文进行编码,其它浏览器 默认会使用utf-8对中文进行编码。服务器端默认会 使用iso-8859-1来解码。
    解决方式:
      step1. 服务器端统一使用utf-8来解码。比如 URIEncoding="utf-8" 【把这一行添加在server中server.xml配置文件的65行】
      step2. 在客户端,使用encodeURI函数对中文数据进行 编码。
    注:encodeURI是javascript内置的函数。

      encodeURI(URIString)方法相当于java.net.URLEncoder.encode(URIString, "UTF-8");

  6.2 浏览器发送post请求

    产生乱码的原因: 
      浏览器默认会使用utf-8对中文进行编码,服务器使用 iso-8859-1来解码。
    解决方式:
      request.setCharacterEncoding("utf-8");

本博客源代码:点击前往

Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法、编程步骤、缓存问题、乱码问题的更多相关文章

  1. js错误:对象不支持此属性或方法

    对象不支持此属性或方法 错误原因: 可能是js的文件名和另外一个文件重复. 也有可能是js里的function和另外一个function名字重复. 也有可能是js里的function和页面的某一元素重 ...

  2. JavaScript的事件对象中的特殊属性和方法(鼠标,键盘)

    鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...

  3. 对象不支持“attachEvent”属性或方法的解决办法

    有些脚本在IE11下执行会报错误: 对象不支持“attachEvent”属性或方法 解决办法 解决办法:把attachEvent改为addEventListener即可

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

    IE10一下的浏览器,如果在JS代码中用了bind函数,那么就会报“SCRIPT438: 对象不支持“bind”属性或方法” 因为浏览器没有提供这个参数的方法,所以我们就自己写一个bind,来让这个参 ...

  5. IE下全局对象报 脚本错误提示“对象不支持此属性或方法”解决方案

    原来是IE会把页面中的元素id可以直接当变量名一样使用,但是这个id变量不能被赋值. 例如: <body id='body'> <script type="text/jav ...

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

    jquery1.8 在IE8 下面报错: 对象不支持此属性或方法 调试发现是下面这一行报错: 在IE8下面报错,在chrome和firefox都是好的. 实在找不到原因,最后把源码改成下面这样: 没有 ...

  7. SCRIPT438: 对象不支持“indexOf”属性或方法

    SCRIPT438: 对象不支持“indexOf”属性或方法 indexOf()的用法:返回字符中indexof(string)中字串string在父串中首次出现的位置,从0开始!没有返回-1:方便判 ...

  8. Lodop“对象不支持SET__LICENSES属性或方法”SET__LICENSES is not a function”

    Lodop中的方法如果书写错误,就会报错:“对象不支持XXX属性或方法”调试JS会报错”SET__LICENSES is not a function” LODOP.SET_LICENSES是加注册语 ...

  9. jQuery 报错,对象不支持tolowercase属性或方法

    泪流满面.<input>里id和name都不能是nodeName,否则跟jquery.js冲突 JQuery 实践问题 - toLowerCase 错误 在应用JQuery+easyui开 ...

  10. IE显示对象不支持此属性或方法 的解决方法

    用C# 编写的ActiveX控件, 调试时,在世界之窗浏览器里能正确显示,但是不能和JS交互,也没有传说中的错误信息框出现,查了很多文档,后来想问题是不是出在浏览器上,换在IE8里调试,点击交互按钮, ...

随机推荐

  1. leetcode 645. Set Mismatch——凡是要节约空间的题目 都在输入数据上下功夫 不要担心破坏原始的input

    The set S originally contains numbers from 1 to n. But unfortunately, due to the data error, one of ...

  2. splunk的统计分析功能——特定字段的统计功能包括取值分布(+topK,min/max/平均值)

    特定字段的统计功能——取值分布,topK,min/max/平均值 例如: date_second 60 值, 100% 的事件 时段平均值 时段最大值 时段最小值 上限值 时段上限值 罕见值 具有此字 ...

  3. python3.x学习笔记2018-02-05更新

    前言:python3.x部分学习笔记,有意交流学习者可加wechat:YWNlODAyMzU5MTEzMTQ=.如果笔记内容有错,请指出来. 对数据类型的操作 可变数据类型:列表,集合,字典 列表: ...

  4. 程序员如何编写好开发技术文档 如何编写优质的API文档工作

    编写技术文档,是令众多开发者望而生畏的任务之一.它本身是一件费时费力才能做好的工作.可是大多数时候,人们却总是想抄抄捷径,这样做的结果往往非常令人遗憾的,因为优质的技术文档是决定你的项目是否引人关注的 ...

  5. 教你用 Python 实现抖音热门表白软件

    之前在群里看到有人发了一个抖音上很火的小视频,就是一个不正经的软件,运行后问你是不是愿意做我的朋友,但你没法点击到「不同意」!并且没办法直接关闭窗口! 很不正经,很流氓,有点适合我. 效果大概是这样的 ...

  6. 【LeetCode】006. ZigZag Conversion

    The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...

  7. 利用MsChart控件绘制多曲线图表

    在.Net4.0框架中,微软已经将Mschart控件集成了进来,以前一直在web下面用过,原来winform下的Mschart控件更加简单更加方便,今天我们用mschart绘制一个多曲线图,发现MsC ...

  8. bzoj 2744 [HEOI2012]朋友圈——补图!+匈牙利算法

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2744 求最大的团<==>补图(有边的变成没边.没边的变成有边)的最大独立集! A ...

  9. linux环境下搭建redis

    1. 官网下载安装包,然后解压,或者直接从github上pull下来. git clone https://github.com/antirez/redis.git 2. 确保linux环境上已安装g ...

  10. ETHNET DHCP的两种方式

    DHCP API: nx_dhcp_create nx_dhcp_start nx_dhcp_stop nx_dhcp_delete nx_ip_address_get //客户端IP获取 nx_dh ...