ajax与传统web开发的异同点

AJAX：

什么是AJAX

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换

AJAX 可以使网页实现异步更新，意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

AJAX的特点

基于Web标准，使用文档对象模板（Document Object Model）作动态显示和交互 ·解决页面数据获取，服务器数据解析，无刷新页面更新
使用XML和XSLT进行数据交换及相关操作
使用XMLHTTPRequest进行异步数据查询和接收 ·解决异步交互的问题
使用JavaScript将所有的东西绑定在一起 ·其他AJAX技术的桥梁，最主要的编程语言JS基础。JS的高级内容。JSON格式

思维方式

用户体验

在传统Web开发中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，需要建立一个HTML form然后GET或者POST数据到服务器端。用户需要点击”Submit”按钮来发送或者接受数据信息，然后等待服务器响应请求，页面重新加载。因为服务器每次都会返回一个新的页面，所以传统的web应用有可能很慢而且用户交互不友好。即：查看—>提交—>等待—>新页面查看—>新的提交... 页面跳转，全页面刷新。用户体验会中断

使用AJAX技术， 就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。通过HTTP Request， 一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面)，展示给用户的还是同一个页面，用户感觉页面刷新，也看不到到Javascript后台进行的发送请求和接受响应。

AJAX在用户体验方面的过程：查看—>提交—>继续浏览—>旧页面查看—>新的提交...页面无刷新，用户体验连贯。

AJAX使用的是异步，传统的Web是使用的同步。 同步更新是需要对整个页面进行更新，并且以新页面的形式显示出来。

异步更新是后台和服务器进行少量数据交换，即不重新加载整个网页就可以对网页的某部分进行更新。而AJAX减少了用户的等待时间。

开发思维

传统的Web PK AJAX方式 

式

优缺点

优点：

1、通过异步模式，网页无刷新，提升了用户体验。
2、优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。
3、Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。

以上是小编给大家介绍的ajax与传统web开发的异同点，希望大家喜欢。

赞 (0)

相关推荐

  • Jquery + Ajax调用webService实例代码(asp.net)

    webService中要实现ajax调用,则要加这句代码: // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释. [System.Web.Script.Services.ScriptService] 代码下载 /201008/yuanma/WebService2.rar 复制代码 代码如下: //无参数调用 $(document).ready(function() { $('#btn1').click(function() { $.ajax({ typ

  • 关于jquery ajax 调用带参数的webservice返回XML数据一个小细节

    后来在一个不起眼的小站找到一个帖子,某个人的一个建议提醒了我. 我原来的代码是这样写的: 错误代码 复制代码 代码如下: $.ajax({ type: "post", url: "_service.asmx/getDataFromATable", data:" { tablename: temp }", dataType: "XML" ... WS是这样写的: webservice 复制代码 代码如下: [WebMethod]

  • AJAX和WebService实现省市县三级联动具体代码

    AJAX和WebService实现省市县三级联动具体代码

    -------------------------------------WebService1.asmx--------------------------------------- 复制代码 代码如下: // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释. [System.Web.Script.Services.ScriptService] public class WebService1 : System.Web.Services.WebServ

  • Jquery Ajax学习实例4 向WebService发出请求，返回实体对象的异步调用

    一.WebService.asmx: 处理业务数据,在GetPerson方法中产生Person实体类数据,供JqueryRequest.aspx调用,代码如下: 复制代码 代码如下: [WebMethod] public Person GetPerson(string name, int age, string address) { Person p = new Person() { Name = name, Age = age, Address = address }; return p; }

  • Jquery Ajax学习实例6 向WebService发出请求，返回DataSet(XML) 异步调用

    一.WebService.asmx: 处理业务数据,在GetDataSet()方法中产生DataSet(XML)数据,供JqueryRequest.aspx调用,代码如下: 复制代码 代码如下: [WebMethod] public DataSet GetDataSet() { DataSet ds = new DataSet(); DataTable dt = new DataTable(); dt.Columns.Add("Name", Type.GetType("Sys

  • 在Asp.net下实现变长连接的web即时应用的实现范例及ReverseAjax的演示介绍

    ReverseAjax 反转AJAX是一种旨在将逻辑控制权转移到服务端的Web实现模式 何谓控制权转移 传统的AJAX调用一般由客户端行为触发,比如说获取区域数据,异步验证等. ReverseAjax将控制权转交给服务端,就像服务端触发客户端事件一样,即很早的Web推的技术. ASP.NET实现变长连接需要使用到异步页面的技术,同时该页面需要禁用会话来实现每次请求都产生一个新的实例执行. 复制代码 代码如下: <%@ Page Language="C#" AutoEventWir

  • Jquery Ajax学习实例5 向WebService发出请求，返回泛型集合数据的异步调用

    一.WebService.asmx: 处理业务数据,在GetList方法中产生泛型集合数据,供JqueryRequest.aspx调用,代码如下: [WebMethod] 复制代码 代码如下: public List<string> GetList() { List<string> list = new List<string>(); list.Add("aaaaaaaaaaaa"); list.Add("bbbbbbbbbbbb"

  • 用juery的ajax方法调用aspx.cs页面中的webmethod方法示例

    首先在 aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性. 如: [WebMethod] public static string GetUserName() { //...... } 如果要在这个方法里操作session,那还得将WebMethod的EnableSession 属性设为true .即: [WebMethod(EnableSession = true)]//或[WebMethod(true)] public static string GetUserNam

  • Jquery ajax传递复杂参数给WebService的实现代码

    Entity: 复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Runtime.Serialization; namespace Entity { [DataContract] public class User { [DataMember] public string Name { get; set; } [DataMemb

  • jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码

    ws.aspx 代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1&q

  • asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码

    首先贴上Jquery的ajax: 复制代码 代码如下: $.ajax({ url: 'ws_Ajax.asmx/BindDictByUpper', type: 'POST', contentType: 'application/json;charset=utf-8', dataType: 'json', data: '{ PpareId:"' + varlue + '"}', success: function (data) { var dataObj = eval("(&q

  • jQuery AJAX 调用WebService实现代码

    用jQuery调用其他项目的WebService 实现登录验证功能 html输入用户名密码: 代码 复制代码 代码如下: <table style="width: 400px"> <tr> <td style="width: 200px" class="left"> Login ID: </td> <td style="width: 200px" class="l

  • jQuery AJAX实现调用页面后台方法和web服务定义的方法分享

    jQuery AJAX实现调用页面后台方法和web服务定义的方法分享

    1.新建demo.aspx页面. 2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 3.无参数的方法调用.大家注意了,这个版本不能低于.net framework 2.0.2.0已下不支持的. 后台代码: 复制代码 代码如下: [WebMethod] public static string SayHello() { return "Hello Ajax!"; } JS代码: 复制代码 代码如下: $(functio

随机推荐