AJAX的基本概念~

New Document1

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0 }
body { font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 18px; line-height: 1.6; color: #333; background-color: #fff; padding: 20px; max-width: 960px; margin: 0 auto }
body>*:first-child { margin-top: 0 !important }
body>*:last-child { margin-bottom: 0 !important }
p,blockquote,ul,ol,dl,table,pre { margin: 15px 0 }
h1,h2,h3,h4,h5,h6 { margin: 20px 0 10px; padding: 0; font-weight: bold }
h1 tt,h1 code,h2 tt,h2 code,h3 tt,h3 code,h4 tt,h4 code,h5 tt,h5 code,h6 tt,h6 code { font-size: inherit }
h1 { font-size: 28px; color: #000 }
h2 { font-size: 24px; border-bottom: 1px solid #ccc; color: #000 }
h3 { font-size: 18px }
h4 { font-size: 16px }
h5 { font-size: 14px }
h6 { color: #777; font-size: 14px }
body>h2:first-child,body>h1:first-child,body>h1:first-child+h2,body>h3:first-child,body>h4:first-child,body>h5:first-child,body>h6:first-child { margin-top: 0; padding-top: 0 }
a:first-child h1,a:first-child h2,a:first-child h3,a:first-child h4,a:first-child h5,a:first-child h6 { margin-top: 0; padding-top: 0 }
h1+p,h2+p,h3+p,h4+p,h5+p,h6+p { margin-top: 10px }
a { color: #4183C4; text-decoration: none }
a:hover { text-decoration: underline }
ul,ol { padding-left: 30px }
ul li>:first-child,ol li>:first-child,ul li ul:first-of-type,ol li ol:first-of-type,ul li ol:first-of-type,ol li ul:first-of-type { margin-top: 0px }
ul ul,ul ol,ol ol,ol ul { margin-bottom: 0 }
dl { padding: 0 }
dl dt { font-size: 14px; font-weight: bold; font-style: italic; padding: 0; margin: 15px 0 5px }
dl dt:first-child { padding: 0 }
dl dt>:first-child { margin-top: 0px }
dl dt>:last-child { margin-bottom: 0px }
dl dd { margin: 0 0 15px; padding: 0 15px }
dl dd>:first-child { margin-top: 0px }
dl dd>:last-child { margin-bottom: 0px }
pre,code,tt { font-size: 12px; font-family: Consolas, "Liberation Mono", Courier, monospace }
code,tt { margin: 0 0px; padding: 0px 0px; white-space: nowrap; border: 1px solid #eaeaea; background-color: #f8f8f8 }
pre>code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent }
pre { background-color: #f8f8f8; border: 1px solid #ccc; font-size: 13px; line-height: 19px; overflow: auto; padding: 6px 10px }
pre code,pre tt { background-color: transparent; border: none }
kbd { background-color: #DDDDDD; background-image: linear-gradient(#F1F1F1, #DDDDDD); background-repeat: repeat-x; border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD; border-style: solid; border-width: 1px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 10px; padding: 1px 4px }
blockquote { border-left: 4px solid #DDD; padding: 0 15px; color: #777 }
blockquote>:first-child { margin-top: 0px }
blockquote>:last-child { margin-bottom: 0px }
hr { clear: both; margin: 15px 0; height: 0px; overflow: hidden; border: none; background: transparent; border-bottom: 4px solid #ddd; padding: 0 }
table th { font-weight: bold }
table th,table td { border: 1px solid #ccc; padding: 6px 13px }
table tr { border-top: 1px solid #ccc; background-color: #fff }
table tr:nth-child(2n) { background-color: #f8f8f8 }
img { max-width: 100% }

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等

AJAX的实现过程

1 利用html+css来实现页面，表达信息；

2 用XMLHttpRequest和web服务器进行数据的异步交换；

3 运营js操作DOM，实现动态局部刷新；var request = new XMLHttpRequest();

XMLHttpRequest对象：后台和服务器交换数据 不用刷新页面，对网页部分的更新（异步请求、局部刷新）

创建了对象可以发送http请求了，什么是http请求？

1.HTTP是计算机通过网络进行通信的规则

2.HTTP是一种无状态的协议(不建立持久的连接，服务端不保留连接的相关信息,浏览器发出请求和服务器返回响应是一个没有记忆的过程)

3.一个完整的【HTTP请求】过程有7个步骤：

???1>建立TCP连接

???2>Web浏览器向Web服务器发送请求命令

???3>Web浏览器发送请求头信息

???4>Web服务器应答

???5>Web服务器发送应答头信息

???6>Web服务器向浏览器发送数据

???7>Web服务器关闭TCP连接

http如何请求？

1.HTTP请求的方法或动作，post或get

2.正在请求的URL

3.请求头，包含一些客户端环境信息，身份验证信息等

4.请求体(请求正文)，包含要发送的一些字符串信息,表单信息等等
//请求头和请求体之间有一个空行，表面请求头已经结束

  • GET:一般用于信息的获取，使用URL传递参数，对发送信息的数量也有限制，一般在2000字符！（发送请求做什么）

    默认方式，一般用于查询、获取操作,不是很安全，任何人可见，信息都显示在URL中

  • POST：一般用于修改服务器上的资源，对所发送的数量无限制。（传递数据）

    一般用于发送表单数据，新建，修改，删除等操作，要安全一些，不在URL中显示，对其他人不显示。

    【幂等】:一个操作任意多次执行所产生的影响均与一次执行的影响相同。GET请求就是一种幂等操作。

【HTTP响应】一般由3部分组成：

1一个数字或文字组成的状态码，用来显示请求是成功还是失败

2响应头，和请求头一样包含许多有用信息，如服务器类型、日期时间、内容类型和长度等

3响应体，即响应正文//响应头和响应体之间有空行

HTTP状态码

1XX：信息类，表示收到Web浏览器请求，正在进一步处理中

2XX: 成功，表示用户请求被正确接收

3XX: 重定向，表示请求没有成功，客户必须采取进一步动作

4XX: 客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found,意味着请求中所引用的文档不存在

5XX: 服务器错误，表示服务器不能完成对请求的处理，如：500

XMLHttpRequest发送请求：

两个方法
open(method,url,async)

method：规定HTTP发送请求的方式是get还是post,不区分大小写，一般来说用大写

url：请求地址(相对地址或绝对地址)

async:同步/异步(false/true)，默认是异步也就是true，可以不用填写

send(string):发送到服务器（该参数可以填或者不填-----get方法不填或填null，post:一般要填）

//GET请求
request.open("GET","url",true);
request.send();
//POST请求
request.open("POST","url",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded ");//设置HTTP头信息--一定要写在open()和send()之间
request.send("name=xxxx&sex=xxx");

XMLHttpRequest取得响应：

XMLHttpRequest对象的属性和方法（获取响应值）

  • responseText:获得字符串形式的响应数据
  • responseXML：获得XML形式的响应数据（比较少）
  • status和statusText:以数字和文本形式返回HTTP状态码
  • getAllResponseHeader()：获取所有的响应报头
  • getResponseHeader()：查询响应中的某个字段的值

readyState属性的变化代表服务器响应的变化（响应成功得到通知）

0：请求未初始化，open还没有调用

1：服务器连接已建立，open已经调用了

2：请求已接收，也就是接收到头信息了

3：请求处理中，也就是接收到了响应主体

4：请求已完成，且响应已就绪，也就是响应完成了

request.onreadystatechange=function(){
if(request.readState===4&&request.status===200){
        // request.responseText; 返回的数据
    }
}
//readyState===4响应完成  status===200，请求成功

跨域：

Javascript出于安全方面的考虑，不允许跨域调用其他页面的对象。什么是跨域呢？

简单地理解就是因为javascript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。

跨域处理，三种方法：

1、处理跨域方法一 代理

通过在同域名下的web服务器端创建一个代理：

北京服务器(域名:www.beijing.com)

上海服务器(域名：www.shanghai.com)

比如在北京的web服务器的后台(www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器(www.shanghai.com/services.php)的服务，然后再把访问结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

2、处理跨域方式二——JSONP(只支持GET请求)：

JSONP可用于解决主流浏览器的跨域数据访问的问题。
在www.aaa.com页面中：

    <script>
    function jsonp(json){
         alert(json["name"]);
    }
    </script>
    <script src="http;//www.bbb.com/jsonp.js"></script>

在www.bbb.com页面中： jsonp({‘name‘:‘xx‘,‘age‘:24})

3、处理跨域的方法三——XHR2：

1、HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能

2.IE10以下的版本都不支持

3.在服务器端 (和前端关系不大)

header(‘Access-Control-Allow-Origin:*‘);
header(‘Access-Control-Allow-Methods:POST,GET‘);

主要来源 http://www.imooc.com/learn/250

时间： 2024-10-23 03:13:41

AJAX的基本概念~的相关文章

Ajax、反向Ajax和WebSocket 概念

Ajax 异步的JavaScript和XML(Asynchronous JavaScript and XML,Ajax),一种可通过JavaScript来访问的浏览器功能特性,其允许脚本向幕后的网站发送一个HTTP请求而又无需重新加载页面.Ajax的出现已经超过了十年,尽管其名字中包含了XML,但你几乎可以在Ajax请求中传送任何的东西,最常用的数据是JSON,其与JavaScript语法很接近,且消耗更少带宽.清单1给出了这样的一个例子,Ajax请求通过某个地方的邮政编码来检索该地的名称. 清

ajax在jQuery中的应用 （3）$.ajax()的基本概念

关于Ajax实现的简单示例

一.代码示例 关于Ajax的基本概念(包括XMLHttpRequest对象及其相关方法属性)移步这里(w3school中文版)学习了解. <!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>使用Ajax异步加载数据</title> <script type = "text/javasc

什么是AJAX

时至今日,大部分的浏览器都允许客户端通过XMLHTTPRequest对象与服务器之间进行异步沟通,以及发送与接收XML数据,更重要的是,不需要完全的回送(Postback,也就是整页回送)与往返就可以进行页面的局部更新.在此类AJAX技术的推波助澜下,新一代的Web应用程序如雨后春笋般纷纷破土而出,这些Web应用程序都拥有极快的响应速度.丰富的用户界面功能(例如:拖放功能)以及即时的数据处理能力,诸如Microsoft Virtual Earth(http://local.live.com)与M

ajax全接触

Ajax 全接触 概念介绍 异步: 指某段程序执行时不会阻塞其他程序执行,其表现形式为程序的执行顺序不依赖程序本 身的书写程序,相反则为同步.其优势在于不阻塞程序的执行,从而提升整体执行效率. 实现异步的大致流程: 运用HTML和CSS来实现页面,表达信息 运用XMLHttpRequest和web服务器进行数据的异步交换 运用JavaScript操作DOM,实现动态局部刷新. http:使计算机通过网络进行通信的规则. 是一种无状态的协议.也就是不建立持久的链接. http请求的过程: 建立TC

反向Ajax，实现服务器向客户端推送消息

反向Ajax的基本概念是客户端不必从服务器获取信息,服务器会把相关信息直接推送到客户端.这样做的目的是解决Ajax传统Web模型所带来的一个限制:实时信息很难从技术上解决.原因是,客户端必须联系服务器,主动询问是否存在变更,如果有变更就会更新页面(或者页面的一部分).虽然可以非常快速完成这个操作,让人感觉好像是实时的,但是实际上不是实时的.我们需要的是,服务器联系查看其页面的所有浏览器,并通告所发生的变更. 反向Ajax是克服这个限制的一种方式.像Ajax本身一样,这不是一门专门的技术,而是按照

使AJAX调用尽可能利用缓存特性

优化网站设计(十四):使AJAX调用尽可能利用缓存特性 前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个最佳实践.这个列表请参考  Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html,同时,他们还发布了一个相应

【转】反向AJAX

原文链接:http://blog.csdn.net/lccone/article/details/7743886 反向Ajax的基本概念是客户端不必从服务器获取信息,服务器会把相关信息直接推送到客户端.这样做的目的是解决Ajax传统Web模型所带来的一个限制:实时信息很难从技术上解决.原因是,客户端必须联系服务器,主动询问是否存在变更,如果有变更就会更新页面(或者页面的一部分).虽然可以非常快速完成这个操作,让人感觉好像是实时的,但是实际上不是实时的.我们需要的是,服务器联系查看其页面的所有浏览

【安全牛学习笔记】SSL、TLS拒绝服务攻击和补充概念

SSL/TLS拒绝服务攻击 thc-ssl-doc SSL协商加密对性能开销增加,大量握手请求会导致拒绝服务 利用SSL secure Reegotiation特性,在单一TCP连接中生成数千个SSL重连接请 求,造成服务器资源过载 与流量式拒绝服务攻击不同,thc-ssl-dos可以利用dsl线路打垮30G宽带的服务器 服务器平均处理300次/秒SSL握手请求 对SMTPS.POP3S等服务同样有效 thc-ssl-dos 192.223.209.205 2083 --accept 对策 禁用