博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ajax主要步骤(讲解2)
阅读量:7199 次
发布时间:2019-06-29

本文共 2344 字,大约阅读时间需要 7 分钟。

hot3.png

为了方便理解,我给AJAX统一了一个流程,要想实现AJAX,就要按照以后步骤走:

(1)创建XMLHttp对象。(2)设置请求方式。(3)调用回调函数。(4)发送请求。

下面详细解释这4个步骤。

  (1)创建XMLHttp对象:XMLHttp对象用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

  创建XMLHttp对象的语法是:var xmlHttp=new XMLHttpRequest();如果是IE5或者IE6浏览器,则使用ActiveX对象,创建方法是:

var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

  一般我们手写AJAX的时候,首先要判断该浏览器是否支持XMLHttpRequest对象,如果支持则创建该对象,如果不支持则创建ActiveX对象。JS代码如下:

var xmlHttp;if(window.XMLHttpRequest){    xmlHttp=new XMLHttpRequest();}else if(window.ActiveXObject){    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}

(2)设置请求方式:在WEB开发中,请求有两种形式,一个是get 一个是post,所以在这里需要设置一下具体使用哪个请求,XMLHttpRequest对象的open()方法就是来设置请求方式的。

  open():

    功能:规定请求的类型、URL 以及是否异步处理请求。

    参数:参数1,设置请求类型(GET 或 POST),GET与POST的区别请自己百度一下,这里不做解释;

         参数2,文件在服务器上的位置;

         参数3,是否异步处理请求,是为true,否为false。

  具体的JS代码实现如下:

xmlHttp.open("POST","test.do?method=ajaxTest&&msg="+new Date(),true);

 在上段代码中,请求的名字是:"test.do?method=ajaxTest&&msg="+new Date(),后面有个new Date(),这里主要是防止缓存问题,如果是不段的更新页面内容,那么很可能就会出现点击按钮后内容页不改变,因为如果没有后面的msg=new Date()那么我们每一次发送的请求都是一样的,这样很可能就导致了缓存问题。所以需要在请求后面加上msg=new Date(),这样保障了每次的请求都不一样,避免缓存问题。

  (3)回调函数:

  如果在上一步中open方法的第三个参数选择的是true,那么当前就是异步请求,这个时候需要写一个回调函数,xmlHttp对象有一个onreadystatechange属性,这个属性返回的是一个匿名的方法,所以回调函数就在这里写xmlHttp.onreadystatechange=function{},function{}内部就是回调函数的内容。所谓回调函数,就是请求在后台处理完,再返回到前台所实现的功能。在这个例子里,我们的回调函数要实现的功能就是接收后台处理后反馈给前台的数据,然后将这个数据显示到指定的div上。因为从后台返回的数据可能是错误的,所以在回调函数中首先要判断后台返回的信息是否正确,如果正确才可以继续执行。代码如下:

if(xmlHttp.readyState==4){    if(xmlHttp.status==200){    document.getElementById("testid").value=xmlHttp.responseText;//将信息显示到页面 }else{    alert("AJAX服务器返回错误!");}    }

 在上面代码中,xmlHttp.readyState是存有XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化。1: 服务器连接已建立。2: 请求已接收。3: 请求处理中。4: 请求已完成,且响应已就绪。所以这里我们判断只有当xmlHttp.readyState为4的时候才可以继续执行。

  xmlHttp.status是服务器返回的结果,其中200代表正确。404代表未找到页面,所以这里我们判断只有当xmlHttp.status等于200的时候才可以继续执行。

  document.getElementById("testid").value=xmlHttp.responseText;这段代码就是回调函数的核心内容,就是获取后台返回的数据,然后将这个数据赋值给id为testid的div。xmlHttp对象有两个属性都可以获取后台返回的数据,分别是:responseText和responseXML,其中responseText是用来获得字符串形式的响应数据,responseXML是用来获得 XML 形式的响应数据。至于选择哪一个是取决于后台给返回的数据的,这个例子里我们只是显示一条字符串数据所以选择的是responseText。responseXML将会在以后的例子中介绍。

(4)发送请求:发送请求是调用xmlHttp对象的send()方法。代码如下:

xmlHttp.send();

 综合以上讲解代码:

      FirstTest.html                   

 

转载于:https://my.oschina.net/u/3740271/blog/1612356

你可能感兴趣的文章
推荐6款常用的Java开源报表制作工具
查看>>
CentOS mini安装环境下安装私有YUM服务器
查看>>
mysql case when 多参数条件语法
查看>>
iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势)
查看>>
实现JSON在线美化(格式化)、JSON转CSV、CSV转XML工具-toolfk程序员工具网
查看>>
Combine Two Tables[leetcode]
查看>>
Linux环境变量
查看>>
Python2 进程扫描脚本
查看>>
JQuery EasyUI 日期控件如何控制日期选择区间
查看>>
scrapy ImportError: No module named items
查看>>
jboss7.1.1配置jndi
查看>>
JSP里request变量列表
查看>>
#python#面向对象练手+模仿Amazon的物流追踪显示
查看>>
器者,道之所载
查看>>
五种情况下Win7或重蹈Vista覆辙
查看>>
Timer定时器
查看>>
Win7、Ubuntu双系统正确卸载Ubuntu系统
查看>>
两数互换的例子
查看>>
我的友情链接
查看>>
网络拓扑自动发现-Sugarnms智能网管软件的基础
查看>>