• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >AJAX > 零基础学习AJAX之AJAX的简介和基础

零基础学习AJAX之AJAX的简介和基础

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了零基础学习AJAX之AJAX的简介和基础等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

本节简介(异步链接服务器对象)XMLHTTPRequest以及AJAX的简介。

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)。 AJAX有四个方面的好处:1.即减轻了服务器的负担。2带来了更好的用户体验。3.基于标准被广泛的支持。4.拥有更好的页面呈现和数据分离。

技术名称 技术说明
javascript javascript是通用的脚本语言,AJAX是用javascript编写的
css 用户界面的样式通过css来修改
DOM DOM通过javascript修改DOM,ajax可以在运行时改变用户界面,或者局部更新页面中的某个节点。
XMLHttpRequest XMLHttpRequest对象 XMLHttpRequest对象允许web程序员从web服务器以后台的方式获取数据。数据的个数通常是XML或者是文本。

从上面我们看出,javascript就想胶水一样将各个部分粘贴在一起,例如通过javascript操作BOM改变刷新用户界面,通过修改className来改变css样式风格

1.异步对象连接服务器

不严谨的说,ajax是一个简单的多线程,它能够是用户在前台多种操作而不间断。ajax异步交互在后台默默的工作着 在web中异步访问是通过XMLHttpRequest对象来实现的,该对象最早是在ie5被作为activeX控件引入的。随后各个浏览器纷纷支持该异步对象,首先必须创建对象。代码如下:

    var xmlHttp;
            function createXMLHrrpRequest() {
                if (window.ActiveXObject)
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                else if (window.XMLHttpRequest)
                    xmlHttp = new XMLHttpRequest();
            }
</div>

该对象是先创建了一个全局变量xmlHttp,留以后函数中使用。另外创建异步对象函数createXMLHrrpRequest()

该过程用到了if语句方法,如果是IE采用window.ActiveXobject方法,如果不是,则用XMLHttpRequest方法创建函数。

 在创建完异步对象后,自然是使用该对象连接服务器,该对象有一系列十分有用的属性和方法。

属性/方法 说明
abort() 取消请求
getAllResponseHeaders() 获取指定的Http头
open(method,url) 创建请求,method指定请求类型,GET POST
send() 发送请求
setRequestHeader() 指定请求的http头
onreadystatechange 发生任何状态变化时的事件控制对象
readyState 

请求的状态

0为尚未初始化

1为正在发送请求

2为请求完成

3为请求成功,正接收数据。

4为接收数据成功

responseText 服务器返回文本
responseXML 服务器返回xml
status 
服务器返回的http请求响应值,常用的有

200表示请求成功

202表示请求被接收,但处理未完成

400表示错误的请求

404表示资源未找到

500表示内部服务器错误,如aspx代码错误

创建完XMLHttpRequest对象后首先利用open()方法建立一个请求,并向服务器发送,该方法的完整表示式如下:

open(methond,url,asynchronous,user,password)
其中,method表示请求的类型,通长为GET,POST。

url即请求的地址,可以是绝对地址,也可以是相对地址。

asynchronous是一个布尔值,表示是否为异步请求,默认值为异步请求true。

user、password分别为可选的用户名、密码。

创建了异步对象后,要建立一个到服务器的请求可使用如下代码:

xmlHttp.open("GET","1-1.aspx",true);
以上代码用get方法请求的相对地址为9-1.aspx的页面,方式是异步的。在发出了请求后便需要请求的状态readyState属性来判断请求的情况,如果该属性变化了,就会触发onreadystatechange事件,因此通常的代码如下:

<script type="text/javascript">
            xmlHttp.onRecorderStateChange = function(){
                if(xmlHttp.readyState == 4)
                //执行相关代码
            }
        </script>
</div>

也就是直接编写onRecorderStateChange的事件函数,如果readyState的状态为4(数据接收成功)则继续操作。但是通常情况下,不但需要判断请求的状态,还要判断服务器返回的状态status,因此上述代码改为

<script type="text/javascript">
            xmlHttp.onRecorderStateChange = function(){
                if(xmlHttp.readyState == 4&& xmlHttp.status==200)
                //执行相关代码
            }
        </script>
</div>

以上两段代码仅仅只是建立了请求,还需要使用send()方法来发送请求,该方法的原型如下:

send(body);
改方法仅有一个参数body,它表示要向服务器发送的数据,其格式为查询字符串的形式,例如:

var body = "myName=isaac&age=25";
如果再open中指定的是get方式,则这些参数作为查询字符串提交,如果指定的是post方式,则作为HTTP的POST方法提交。对于send()而言。body参数是必须的,如果不发送任何数据,则可以使用

xmlHttp.send(null)
特别的,如果使用POST方法进行提交请求,那么在发送之前必须使用以下语句来设置HTTP的头,语法如下:

xmlHttp.setRequestHeader("content-Type","application/x-www-form-urlencoded;")
服务器在收到客户端请求之后,根据请求返回相应的结果,这个结果通常为两种形式,一种是文本形式,存储在responseText中;另一种是XML格式,存储在responseXML中。客户端程序可以对前者进行字符串的处理,对后者进行DOM相关的处理,例如可以对服务器返回值做如下的处理:

alert("服务器返回:"+xmlHttp.responseText);
上述整个异步连接服务器的过程如下:

    <body>
        <script type="text/javascript">
            var xmlHttp;
            function createXMLHttpRequest() {
                if (window.ActiveXObject)
                    xmlHttp = n

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-11AjaxUI:滑动条
  • 2017-05-11经典的20道AJAX面试题(必知必会)
  • 2017-05-11掌握AJAX第1/7页
  • 2017-05-11健壮的AJAX源码学习应用示例
  • 2017-05-11好用的AJAX类代码分享
  • 2017-05-11ajax的定时调用每5秒调用一次
  • 2017-05-11AJAX +SpringMVC 实现bootstrap模态框的分页查询功能
  • 2017-05-11AJAX的阻塞及跨域名解析
  • 2017-05-11解决微信返回上一页,页面中的AJAX的请求,对Get请求无效的问题
  • 2017-05-11AJAX下的请求方式以及同步异步的区别小结

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Ajax读取数据到表格的实现代码
    • Ajax四种元素的关系介绍
    • AJAX获取服务器当前时间及时间格式输出处理
    • AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页
    • ajax JSONP请求处理回调函数jsonpCallback区分大小写
    • ajax局部刷新实例 (三种方法推荐)
    • Ajax校验是否重复的实现代码
    • 探讨Ajax中有关readyState(状态值)和status(状态码)的问题
    • 原生AJAX写法实例分析
    • 无框架 Ajax分页(原创)第1/2页

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有