Ajax的用法总结

一、什么是Ajax

Ajax英文全称为“ Asynchr JavsScript and XML”（异步的JavaScript和XML），是一种创建交互式网页的开发技术。

二、Ajax技术的核心

Ajax是一系列相关技术的融合，其核心包括XMLHttpRequest、JavsScript和DOM技术，数据格式的不同可能会用到Json或者XML的技术。

XMLHttpRequest是它的核心的内容，它能够为页面中的JavaScript脚本提供特定的通信方式，从而使页面的javascript脚本和服务器之间形成动态交互的效果，XMLHTTPRequest的最大的优点是页面内的javascript脚本可以不用刷新页面，而直接和服务器发生交互，从而实现页面无刷新的效果。

三、XMLHttpRequest方法属性描述

1、方法描述

abort()停止当前请求

getAllResponseHeaders()把HTTP请求的所有响应首部作为键/值对返回

getResponseHeader("header")返回指定首部的串值

open("method","URL",[asyncFlag],["userName"],["password"])建立对服务器的调用。method参数可以是GET、POST或PUT。

url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码

send(content)向服务器发送请求

setRequestHeader("header", "value")把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。

设置header并和请求一起发送 ('post'方法一定要 )

XMLHttpRequest 对象属性描述

2、方法描述

onreadystatechange状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数

readyState请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成

responseText服务器的响应，返回数据的文本。

responseXML服务器的响应，返回数据的兼容DOM的XML文档对象 ，这个对象可以解析为一个DOM对象。

responseBody服务器返回的主题（非文本格式）

responseStream服务器返回的数据流

status服务器的HTTP状态码（如：404 = "文件末找到" 、200 ="成功" ，等等）

statusText服务器返回的状态文本信息 ，HTTP状态码的相应文本（OK或Not Found（未找到）等等）

四、Ajax工作原理原理

AJAX的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器相应异步化。并不是所有的用户请求

都提交给服务器，像一些数据验证和数据处理等都交给AJAX引擎自己来做，只有确定需要从服务器读取新数据时再由

AJAX引擎代为向服务器提交请求。如图：

五、Ajax的优点

1、减轻服务器的负担，提升了网站的性能。

2、无刷新更新页面，减少了用户等待网站加载的时间。

3、用户体验更加友好，可以避免出现白屏的情况。

4、Ajax是基于标准化并且广泛使用的技术几乎所有的主流浏览器都支持该技术，ye不需要单独安装插件。

5、Ajax可以使Web中的页面和应用分离，便于分工合作。

六、Ajax缺点

1、对于移动设备不能很好的支持。

2、Ajax干掉了back按钮，即对浏览器后退机制的破坏。

3、安全问题。比如：跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。

4、对搜索引擎的支持比较弱。

5、破坏了程序的异常机制。至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。

造成调试的困难。

七、使用原则

1、Ajax适用场景

表单驱动的交互

深层次的树的导航

快速的用户与用户间的交流响应

类似投票、yes/no等无关痛痒的场景

对数据进行过滤和操纵相关数据的场景

普通的文本输入提示和自动完成的场景

2、Ajax不适用场景

部分简单的表单

搜索

基本的导航

替换大量的文本

对呈现的操纵

八、原生AJAX写法

var XHR=null;
if (window.XMLHttpRequest) {
// 非IE内核
XHR = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE内核,这里早期IE的版本写法不同,具体可以查询下
XHR = new ActiveXObject("Microsoft.XMLHTTP");
} else {
XHR = null;
}
if(XHR){
XHR.open("GET", "ajaxServer.action");
XHR.onreadystatechange = function () {
// readyState值说明
// 0,初始化,XHR对象已经创建,还未执行open
// 1,载入,已经调用open方法,但是还没发送请求
// 2,载入完成,请求已经发送完成
// 3,交互,可以接收到部分数据
// status值说明
// 200:成功
// 404:没有发现文件、查询或URl
// 500:服务器产生内部错误
if (XHR.readyState == 4 && XHR.status == 200) {
// 这里可以对返回的内容做处理
// 一般会返回JSON或XML数据格式
console.log(XHR.responseText);
// 主动释放,JS本身也会回收的
XHR = null;
}
};
XHR.send();
}

以上所述是小编给大家介绍的Ajax的用法总结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Jquery中$.post和$.ajax的用法小结

    Jquery的$.ajax的用法: jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据,这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求. 注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml").错误

  • jQuery学习笔记之Ajax用法实例详解

    本文实例讲述了jQuery学习笔记之Ajax用法.分享给大家供大家参考,具体如下: 一.Ajax请求 1.jQuery.ajax(options) 通过 HTTP 请求加载远程数据.jQuery 底层 AJAX 实现.简单易用的高层实现见 .get,.post 等. .ajax()返回其创建的XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求..ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下.

  • jQuery+ajax中getJSON() 用法实例

    实例 从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据: 复制代码 代码如下: $.getJSON("test.js", function(json){   alert("JSON Data: " + json.users[3].name); }); 定义和用法 通过 HTTP GET 请求载入 JSON 数据. 在 jQuery 1.2 中,您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据,如 &q

  • 谈谈jQuery Ajax用法详解

    定义和用法 ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax() 可以不带任何参数直接使用. 注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置. jQuery Ajax在web应用开发中很常用

  • jQuery中ajax的post()方法用法实例

    本文实例讲述了jQuery中ajax的post()方法用法.分享给大家供大家参考.具体分析如下: $.post() 方法通过HTTP POST请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.post(URL,data,callback); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,规定连同请求发送的数据. 3.callback:可选,规定请求成功后所执行的函数名. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html&g

  • 双层ajax嵌套（可多层）用法实例

    本文实例讲述了双层ajax嵌套(可多层)用法.分享给大家供大家参考.具体如下: function addbus() { //清除a标签中的所有元素 // $("#s1").remove(); var chooseIdTypeOne =$("#chooseIdTypeOne2").find("option:selected").val(); $.ajax({ url : "/ftcms/changeProject.do?getOrigin

  • jQuery中ajax的load()方法用法实例

    本文实例讲述了jQuery中ajax的load()方法用法.分享给大家供大家参考.具体分析如下: 此函数jQuery中简单而功能强大的ajax方法. 它可以从服务器加载内容,然后写入匹配元素. 语法结构: 复制代码 代码如下: $(selector).load(URL,data,callback); 参数解析: 1.selector:一个选择器,可以将内容加载到此选择器匹配的元素中. 2.URL:必须,需要加载的一个url地址. 3.data:可选,与请求一同发送的查询字符串键/值对集合. 4.

  • jQuery中ajax的get()方法用法实例

    本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.get(url, [data], [callback], [type]); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,待发送 Key/value 参数. 3.callback:可选,请求成功后所执行的回调函数. 4.type:可选,返回内容格式,xml, html, scri

  • Ajax的用法总结

    Ajax的用法总结

    一.什么是Ajax Ajax英文全称为" Asynchr JavsScript and XML"(异步的JavaScript和XML),是一种创建交互式网页的开发技术. 二.Ajax技术的核心 Ajax是一系列相关技术的融合,其核心包括XMLHttpRequest.JavsScript和DOM技术,数据格式的不同可能会用到Json或者XML的技术. XMLHttpRequest是它的核心的内容,它能够为页面中的JavaScript脚本提供特定的通信方式,从而使页面的javascript

  • 详谈jQuery Ajax(load,post,get,ajax)的用法

    今天看到群里面有网友们问到Jquery Ajax的(load,post,get,ajax)之间的区别,现在整理了一篇文章出来,希望可以帮到网友们,首先我们先来看一些简单的方法, 这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String): 请求的HT

  • php下的原生ajax请求用法实例分析

    本文实例讲述了php下的原生ajax请求用法.分享给大家供大家参考,具体如下: 浏览器中为我们提供了一个JS对象XMLHttpRequet,它可以帮助我们发送HTTP请求,并接受服务端的响应. 意味着我们的浏览器不提交,通过JS就可以请求服务器. ajax(Asynchronous Javascript And XML)其实就是通过XHR对象,执行HTTP请求. 1.创建XHR对象 var xhr = new XMLHttpRequest(); //暂不考虑兼容 2.XHR的对象属性和方法 方法

  • Python3爬虫中Ajax的用法

    Ajax,全称为Asynchronous JavaScript and XML,即异步的JavaScript和XML.它不是一门编程语言,而是利用JavaScript在保证页面不被刷新.页面链接不改变的情况下与服务器交换数据并更新部分网页的技术. 对于传统的网页,如果想更新其内容,那么必须要刷新整个页面,但有了Ajax,便可以在页面不被全部刷新的情况下更新其内容.在这个过程中,页面实际上是在后台与服务器进行了数据交互,获取到数据之后,再利用JavaScript改变网页,这样网页内容就会更新了.

  • jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解

    当我们用javascript写ajax程序写得很"开心"的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼纠结的ajax乱码问题,更幸福的是你的js代码将大大地简化,看完本文,你会发现,ajax,简单的来讲就是一句话的事情. 1.$.get $.get()方法使用GET方式来进行异步请求,它的语法结构为: $.get( url [, data] [, callback] ) 解释一下这个函数的各个参数: url:

  • JQuery的ajax的用法在asp中使用$.ajax()实现

    复制代码 代码如下: <% response.Expires=-1 response.CacheControl="no-cache" %> <!--#include file="../../conn/conn.asp"--> <!--#include file="../psw.asp"--> <!--#include file="../../functions/dofunction.asp&qu

  • jquery $.ajax相关用法分享

    复制代码 代码如下: $.ajax({ type: "GET", url: "Services/EFService.svc/Members", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { // Play with returned data i

  • jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例

    jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,今天用到了就分享一下. 由于我做的项目一些地方比较复杂,这里我只举一个小例子,能理解就好. 首先,我做了一个简单的多个复选框的界面,如图: 这是一个比较简单的多个复选框提交界面.代码如下: <body> <div> <input type="chec

  • jsp实现checkbox的ajax传值实例

    本文实例讲述了jsp实现checkbox的ajax传值用法.分享给大家供大家参考.具体分析如下: 今天我想用ajax把选中的所有的chekbox的值全部都传到后台做一个处理,但在后台接收值的时候,我遇到了麻烦,以为没有经过跳转所以request中是没有值的. 查了一下,查到了解决方法,如下 页面代码: 复制代码 代码如下: <input type="checkbox" name="atitle" value="历史名胜"><la

随机推荐