Ajax 并不算是一种新的技术,全称是 asynchronous javascript and xml,能够说是已 有技术的组合,主要用来实现客户端与服务器端的异步通讯效果,实现页面的局部刷新,早 期的浏览器并不能原生支持 ajax,可使用隐藏帧(iframe)方式变相实现异步效果,后 来的浏览器提供了对 ajax 的原生支持javascript
使 用 ajax 原 生 方 式 发 送 请 求 主 要 通 过 XMLHttpRequest( 标 准 浏 览 器 ) 、 ActiveXObject(IE 浏览器)对象实现异步通讯效果css
基本步骤:java
var xhr =null;//建立对象
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(“方式”,”地址”,”标志位”);//初始化请求
xhr.setRequestHeader(“”,””);//设置 http 头信息
xhr.onreadystatechange =function(){}//指定回调函数
xhr.send();//发送请求
复制代码
js 框架(jQuery/EXTJS 等)提供的 ajax API 对原生的 ajax 进行了封装,熟悉了基础 理论,再学习别的框架就会驾轻就熟,好多都是换汤不换药的内容ajax
张三叫李四去吃饭,李四一直忙得不停,张三一直等着,直到李四忙完两我的一块去吃饭 =浏览器向服务器请求数据,服务器比较忙,浏览器一直等着(页面白屏),直到服务器返 回数据,浏览器才能显示页面数据库
张三叫李四去吃饭,李四在忙,张三说了一声而后本身就去吃饭了,李四忙完后本身去吃 =浏览器向服务器请求数据,服务器比较忙,浏览器能够自如的干原来的事情(显示页面), 服务器返回数据的时候通知浏览器一声,浏览器把返回的数据再渲染到页面,局部更新json
理解跨域的概念:协议、域名、端口都相同才同域,不然都是跨域api
出于安全考虑,服务器不容许 ajax 跨域获取数据,可是能够跨域获取文件内容,因此 基于这一点,能够动态建立 script 标签,使用标签的 src 属性访问 js 文件的形式获取 js 脚本,而且这个 js 脚本中的内容是 函数调用,该函数调用的参数是服务器返回的数据,为 了获取这里的参数数据,须要事先在页面中定义回调函数,在回调函数中处理服务器返回的 数据,这就是解决跨域问题的主流解决方案跨域
对于 ajax 请求传递的参数:数组
同源策略是客户端脚本(尤为是 Javascript)的重要的安全度量标准。它最先出自 Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不一样源装载。所谓同源指的 是:协议,域名,端口相同,同源策略是一种安全协议,指一段脚本只能读取来自同一来源 的窗口和文档的属性。浏览器
GET:通常用于信息获取,使用 URL 传递参数,对所发送信息的数量也有限制,通常在 2000 个字符,有的浏览器是 8000 个字符 POST:通常用于修改服务器上的资源,对所发送的信息没有限制 在如下状况中,请使用 POST 请求:
Ajax 能够实现异步通讯效果,实现页面局部刷新,带来更好的用户体验;按需获取数 据,节约带宽资源;
一、ajax 不支持浏览器 back 按钮。 二、安全问题 AJAX 暴露了与服务器交互的细节。 三、对搜索引擎的支持比较弱。 四、破坏了程序的异常机制。
get 通常用来进行查询操做,url 地址有长度限制,请求的参数都暴露在 url 地址当中, 若是传递中文参数,须要本身进行编码操做,安全性较低。 post 请求方式主要用来提交数据,没有数据长度的限制,提交的数据内容存在于 http 请求体中,数据不会暴漏在 url 地址中。
Jsonp 并非一种数据格式,而 json 是一种数据格式,jsonp 是用来解决跨域获取数据 的一种解决方案,具体是经过动态建立 script 标签,而后经过标签的 src 属性获取 js 文件 中的 js 脚本,该脚本的内容是一个函数调用,参数就是服务器返回的数据,为了处理这些 返回的数据,须要事先在页面定义好回调函数,本质上使用的并非 ajax 技术
优势:可使得页面不重载所有内容的状况下加载局部内容,下降数据传输量,避免用 户不断刷新或者跳转页面,提升用户体验 缺点:对搜索引擎不友好;要实现 ajax 下的先后退功能成本较大;可能形成请求数的 增长跨域问题限制;
优势:轻量级、易于人的阅读和编写,便于机器(JavaScript)解析,支持复合数据类 型(数组、对象、字符串、数字)
200 - 请求成功 301 - 资源(网页等)被永久转移到其它 URL 404 - 请求的资源(网页等)不存在 500 - 内部服务器错误
分为 4 个步骤:
get 通常用来进行查询操做,url 地址有长度限制,请求的参数都暴露在 url 地址当中, 若是传递中文参数,须要本身进行编码操做,安全性较低。 post 请求方式主要用来提交数据,没有数据长度的限制,提交的数据内容存在于 http 请求体中,数据不会暴漏在 url 地址中。
使用 eval() 或者 JSON.parse() 鉴于安全性考虑,推荐使用 JSON.parse()更靠谱,对 数据的安全性更好。
本地对象为独立于宿主环境的 ECMAScript 提供的对象,包括 Array Object RegExp 等 能够 new 实例化的对象 内置对象为 Gload,Math 等不能够实例化的(他们也是本地对象,内置对象是本地对象 的一个子集) 宿主对象为全部的非本地对象,全部的 BOM 和 DOM 对象都是宿主对象,如浏览器自带的 document,window 等对象
确保用户在不一样地区能用最快的速度打开网站,其中某个域名崩溃用户也能经过其余郁 闷访问网站,而且不一样的资源放到不一样的服务器上有利于减轻单台服务器的压力。
一、压缩 css、js 文件 二、合并 js、css 文件,减小 http 请求 三、外部 js、css 文件放在最底下 四、减小 dom 操做,尽量用变量替代没必要要的 dom 操做
200 OK //客户端请求成功 400 Bad Request //客户端请求有语法错误,不能被服务器所理解 403 Forbidden //服务器收到请求,可是拒绝提供服务 404 Not Found //请求资源不存在,输入了错误的 URL 500 Internal Server Error //服务器发生不可预期的错误 503 Server Unavailable //服务器当前不能处理客户端的请求,一段时间后可能恢复正常