一、Ajax工作核心

Ajax的核心是JavaScript对象XMLHttpRequest(简称XHR)。它是一种支持异步请求的技术。可以通过使用XHR对象向服务器提出请求并处理响应,而不阻塞用户。

Ajax可以完成的功能有:

  • 在不重新加载页面的情况下更新网页
  • 在页面已加载后从服务器请求数据
  • 在页面已加载后从服务器接收数据
  • 在后台向服务器发送数据

1.1 Ajax简介

  Ajax可以说 是目前最流行的 WEB 技术,它采用客户端脚本与 Web 服务器交换数据,也就是说,客户端的表单请求不是直接给 WEB 服务器,而是一些 Javascript 脚本,再通过 JS 内置的 xmlhttprequest 对象,异步的将请求发送给 WEB 服务器, WEB 服务器处理完之后再回发给 Javascript 脚本 , 然后动态的更新页面数据。由此可见 AJAX 并不是一种独立的技术,而是由 Javascript+DHTML+DOM+HTML 多种技术的组合 , 它少了等待服务器响应的时间,并且它可以使页面局部刷新,由此增强了用户体验。

二、Ajax开发步骤

2.1XMLHttpRequest对象

Ajax核心对象XmlHttpRequest对象的常用的方法和属性如下:

  • open():建立到服务器的新请求
  • send():向服务器发送请求
  • abort():放弃当前请求
  • readyState:对象状态值,未为初始化、正在加载、加载完毕、交互、完成五种。
  • responseText :服务器返回的请求文本信息
  • onreadystatechange:每次状态改变所触发的事件处理程序
  • responseXML:从服务器进程返回的DOM兼容的文档数据对象
  • status:从服务器返回的数字代码,如404(未找到)
  • statusText:伴随状态码的字符串信息

XMLHttpRequest对象的创建以及与服务器的交互如下代码所示:

<script language="javascript" type="text/javascript">
function callServer()
{
var xmlHttp = new XMLHttpRequest();
var ID = document.getElementById("ID").value;
var PASS= document.getElementById("PASS").value;
   if((ID == null) ||(ID == "")) return;
if((PASS== null) ||(PASS == "")) return;
//创建url链接
var url = "Login?Id="+escape(ID)+"&PASS="+escape(PASS);
  //最后一个参数如果是true的话,那么将请求一个异步连结
xmlHttp.open("POST",url,true);
//如果服务器完成请求,RefreshPage函数被触发
xmlHttp.onreaadstatechange = RefreshPage;
//发送请求
xmlHttp.send(null);
} function RefreshPage()
{
if(xmlHttp.readyState == 4)
{
alert('服务器返回的数据为: ' + xmlHttp.responseText);
}
}
</script>

2.2 获取Request对象:

由于不同浏览器的差异,获取XmlHttpRequest对象需要采用不同的方式

<script language="javascript" type="text/javascript">
<!--
var xmlhttp;
// 创建XMLHTTPRequest对象
function createXMLHTTPRequest(){
if(window.ActiveXObject){ // 判断是否支持ActiveX控件
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // 通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象
}
else if(window.XMLHTTPRequest){ // 判断是否把XMLHTTPRequest实现为一个本地javascript对象
xmlhttp = new XMLHTTPRequest(); // 创建XMLHTTPRequest的一个实例(本地javascript对象)
}
}
//-->
</script>

2.3 Ajax的基本请求/响应类型

Ajax应用程序中处理服务请求的流程如下:

  • 从web表单中获取需要提交的数据
  • 建立要连结的url
  • 打开到服务器的连接
  • 设置服务器在完成后要运行的函数
  • 发送请求

2.4 调用Ajax过程

<form>
<p>用户ID:<input type="text" name="ID" id="city" size="10" onChange="callServer();"/> </p>
<p>口令:<input type="text" name="PASS" id="state" size="16" onChange="callServer();"/> </p>
</form>

Ajax的基本请求/响应模型的更多相关文章

  1. asp.net请求响应模型原理随记回顾

    asp.net请求响应模型原理随记回顾: 根据一崇敬的讲师总结:(会存在些错误,大家可以做参考) 1.-当在浏览器输入url后,客户端会将请求根据http协议封装成为http请求报文.并通过主sock ...

  2. HTTP协议请求响应模型

    HTTP协议请求响应模型:以”用户登录“这个场景来描述 第一步:客户端发起请求到API接口层,操作:用户在客户端填写用户名和密码,点击登录,发送请求. 第二步:api接收到客户端发起的用户请求,api ...

  3. asp.net mvc请求响应模型原理回顾

    根据讲师所讲总结了一下(可能存在些描述错误) -------------mvc进入asp.net管道原理: (在执行httpapplication管道之前mvc和asp.net是相同的,不同之处在于管 ...

  4. Http请求响应模型

    主要用到以下四个部分: Client   API   DB   API 场景:登录 1.Client发起请求到API接口层 1.1用户在客户端输入登录信息,点击登录,发送请求 2.API接受用户发起的 ...

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

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

  6. AJAX 创建对象 请求 响应 readyState

    AJAX 创建对象 请求 响应 readyState AjAX = Asynchronous JavaScript and XML (异步的JavaScrip和 XML). 不是新的编程语言, 而是一 ...

  7. IT兄弟连 JavaWeb教程 使用AJAX发送POST请求并获取响应

    POST请求用于向服务器发送应该被保存的数据,因此POST请求天然比GET请求多需要一份需要被保存的数据.那么这些数据应该放在何处呢?毕竟,我们的open()方法接收的三个参数都没有合适的位置. 答案 ...

  8. IT兄弟连 JavaWeb教程 使用AJAX发送GET请求并获取响应

    GET请求用于获取数据,有时候我们需要获取的数据需要通过"查询参数"进行定位,在这种情况下,我们会将查询参数追加到URL的末尾,令服务器解析. 使用Ajax发送GET请求非常简单, ...

  9. Web请求响应简单整理

      简单对Web请求响应如何处理进行的整理,难免有理解不到位,理解有偏差的地方,如有理解有误的地方,希望大牛批评指正. 1.Web开发的定义首先看看微软对Web开发的定义:Web开发是一个指代网页或网 ...

随机推荐

  1. Promise初体验

    想通过回调函数做一个动画效果:三个小球依次运动,第一个小球运动到指定位置后回调第二个小球运动,依次类推,效果如图所示: 到第三个小球到达指定位置再回调,让第二个小球往回移动,直到最后一个小球回到原位: ...

  2. 2017 年不可错过的开发工具 Top 50

    想知道 2017 年有哪些值得关注的开发工具吗?StackShare 年度开发工具排行榜来啦! StackShare.io 是一个开发者工具及服务分享平台,致力于发现并分享开发者使用的开发工具.服务与 ...

  3. Dos.ORM Select查询 自定义列

    自定义列 .Select( p = >new{ test = p.id}) // 同sql 列名 as 新列名 如下是 自己在写代码的例子,查询,分页,where条件,排序 var where ...

  4. .net在网页中生成二维码和条形码

    二维码: 1.下载ThoughtWorks.QRCode.dll文件 2.创建Web项目,添加引用刚才下载的文件 3.在项目中添加aspx窗体,编写代码如下 <%@ Page Language= ...

  5. Linux环境快速搭建RocketMQ双Master模式

    RocketMQ的集群部署方式有多种,其中包括单个Master.多个Master.多Master多Slave模式(异步复制)以及多Master多Slave模式(同步双写).本次以多Master集群模式 ...

  6. JavaScript进阶(三)

    现在来说说判断语句(if)if语句是基于条件成立才执行相应代码时使用的语句.语法:if(条件){条件成立时执行代码}注意:if小写,大写字母(IF)会出错!假设你应聘web前端技术开发岗位,如果你会h ...

  7. 批处理+组策略 实现规定时间段无法开机and定时关机

    某爱熬夜的人对付自己的东西 1.shutdown命令 shutdown -a #取消现有的shutdown计划 shutdown -s -t [time] #设定时间关机 shutdown -r -t ...

  8. SHELL中,如何分割字符串

    done.csv中,形如 amoy9812@163.com的数据 #!/bin/shwhile read linedo ar=(${line//@/ }) echo ${ar[0]} #说明:分解出账 ...

  9. JavaEE XML DOM解析

    DOM解析XML @author ixenos XML解析方式(原理) a)     DOM 解析树 b)     SAX  流事件 DOM解析对应主流工具 i.          DOM(官方) i ...

  10. 记JavaScript的入门学习(二)

    2016年11月25号,利用上午时间学习了JavaScript的数据类型和变量,下午就该去图书馆泡书了. 看完变量的本章节,发现我可能不能一天结束,那我就利用上午和晚上九点回来的时间完成吧.把心态调整 ...