码迷,mamicode.com
首页 > Web开发 > 详细

ajax基本概念

时间:2015-08-07 22:25:10      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:ajax

一:简单介绍

1.基本概念

AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML)。

AJAX 是一种在 2005 年由 goo gle 推广开来的编程模式。

AJAX 不是一种新的编程语言,而是一种使用现有标准的新方法。

通过 AJAX,你可以创建更好、更快以及更友好的 WEB 应用程序。

AJAX 基于 JavaScript 和 HTTP 请求(HTTP requests)。

 

2.ajax优点

AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。

AJAX 可使因特网应用程序更小、更快,更友好。

AJAX 是一种独立于 Web 服务器软件的浏览器技术。

 

3.基于的web标准

AJAX 基于下列 Web 标准:

JavaScript

XML

HTML

CSS

在 AJAX 中使用的 Web 标准已被良好定义,并被所有的主流浏览器支持。AJAX 应用程序独立于浏览器和平台。

 

二:ajaxhttp请求

1.    传统请求

必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发送/获取信息,等待服务器的响应,然后一张新的页面会加载结果。

 

2.    使用ajax请求

利用 AJAX,您的 JavaScript 会通过 JavaScript 的 XMLHttpRequest 对象,直接与服务器来通信。

通过使用 HTTP 请求,web 页可向服务器进行请求,并得到来自服务器的响应,而不加载页面。用户可以停留在同一个页面,用户不会注意到脚本在后台请求过页面,或向服务器发送过数据。

 

三:ajax的浏览器支持

AJAX 的要点是 XMLHttpRequest 对象。

不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。

IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。

如需针对不同的浏览器来创建此对象,我们要使用一条 "try and catch" 语句。

 

简单案例:

<!doctypehtml>

<html>

<head>

<metacharset="utf-8">

<title>无标题文档</title>

</head>

<body>

<scripttype="text/javascript">

       function ajaxFunction(){

              var xmlHttp;

              try{

                     //Firefox, Opera 8.0+,Safari

                     xmlHttp=newXMLHttpRequest();

              }

              catch(e){

                     //IE浏览器

                     try{

                            xmlHttp=newActiveXObject("Msxml2.XMLHTTP");

                     }

                     catch(e){

                            window.alert("您的浏览器不支持ajax!");

                            return false;

                     }

              }

       }

</script>

<formname="myForm">

       用户:<input type="text"name="username"/>

    时间:<input type="text"name="time"/>

</form>

</body>

</html>

版权声明:博主原创文章,转载请说明出处。http://blog.csdn.net/dzy21

ajax基本概念

标签:ajax

原文地址:http://blog.csdn.net/dzy21/article/details/47344907

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!