【原创】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的用法总结相关推荐
- Ajax是什么?Ajax高级用法之Axios技术
Ajax AJAX 异步请求局部刷新 Ajax 参数详解 js.json.jsonp区别 json和jsonp的区别 同源策略 json和js对象的区别 Ajax高级用法(axios) 为什么要用Ax ...
- Ajax updatepanel用法
局部更新是ajax技术的最基本,也是最重要的用法,今天把asp.net ajax中的局部更新控件 updatepanel的用法总结下,大家可以共同探讨 UpdatePanel控制页面的局部更新,这个更 ...
- 深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法
当我们用javascript写ajax程序写得很"开心"的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼 ...
- ajax实战用法详解
谦虚使人进步,总结使人提高! 以下5个方法执行一般Ajax请求的简短形式,在处理复杂的Ajax请求时应该使用jQuery.ajax() 1.load(url,[data],[callback]) 载入 ...
- ajax deferred 用法
jquery 1.5后增加了deferred 对象,处理延迟.给了我们一些代码组织新的机会. 首先复习一下ajax 原理. ajax是通过http请求远程加载数据的一种方式.异步加载,不会阻塞文件中后 ...
- $.get、$.post、$getJSON、$ajax的用法跟区别
$.get $.get()方法使用GET方式来进行异步请求,它的语法结构为: $.get( url [, data] [, callback] ) 解释一下这个函数的各个参数: url:string类 ...
- js原生ajax与jquery的ajax的用法区别
什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术. 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据 XMLHttpRequest对象的基本属性: onre ...
- ajax基本用法介绍
一.基于jQuery的ajax 此时需要在模板中引用jQuery,ajax的本质是利用浏览器自带的XMLHttpRequest对象并通过jQuery将数据和请求头进行封装再发送.ajax基本使用方法如 ...
- Ajax的用法之JQuery
示例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
最新文章
- 前端小项目:使用canvas绘画哆啦A梦
- 大数据 -- Hadoop集群搭建
- 碰到日期题就怕的我来写一道水题吧
- 用DataGrip生成导出整个库数据的方法
- CSAPP Bomb Lab记录
- 并发控制常见手段-----乐观锁和悲观锁
- Java中HashMap原理
- 22_粗粒度权限控制
- 同学留步,我想跟你聊聊成长中的苦难
- 荷马史诗 csdn_拥有荷马·辛普森的创造力时如何学习网页设计
- 最简单的SVN英文版变中文版的方法
- java 计算π_Java实现计算圆周率π的两种方法 - 博客频道 - CSDN.NET
- javaweb中ffmpeg视频转码h264出现卡住不执行的解决办法(看到最后面就是答案了)
- 全球与中国锂离子电池回收技术市场深度研究分析报告
- CP1202官方串口驱动
- 老男孩mysql 百度云_英语语录:除了你,没人能掌控你的幸福
- Java将json字符串转list对象(亲测)
- 解决 Python Matplotlib 绘图时不连续x轴自动补全的问题(xsticks)
- 自学Oracle行吗?和参加Oracle培训有什么区别?
- KeilMDK配置项中Use MicroLIB
热门文章
- HALCON示例程序optical_flow.hdev如何使用optical_flow_mg计算图像序列中的光流以及如何分割光流。
- 机器学习——深度学习之数据库和自编码器
- 关于cmake从GitHub上下载的源码启动时报错的问题
- javascript 中文与Unicode相互转化
- web.py端口被占用的错误
- 汇编语言学习笔记(五)
- JavaScript 之 动态加载JS代码或JS文件
- codeforces 650B - Image Preview
- 【js】获得项目路径
- .Net中堆栈和堆的区别