ajax 的理解

AJAX -- Asynchronous  JavaScript  And  XML ,异步 JavaScript 和 XML。ajax 的语言载体是 javascript。

AJAX 涵盖了五方面的内容:

  1. 使用 XHTML 和 CSS 的基于标准的表示技术

  2. 使用 DOM 进行动态显示和交互

  3. 使用 XML 和 XSLT 进行数据交换和处理

  4. 使用 XMLHttpRequest 进行异步数据检索

  5. 使用 JavaScript 将以上技术融合在一起

AJAX 能做什么:

  1. 改善表单验证方式,不再需要打开新页面,也不再需要将整个页面数据提交

  2. 不需刷新页面就可以改变页面内容,减少用户等待时间

  3. 按需获取数据,每次只从服务器端获取需要的数据

  4. 读取外部数据,进行数据处理整合

  5. 异步与服务器进行交互,在交互过程中用户无需等待,仍可继续操作

AJAX 的使用:

  1. 创建 ajax 对象

    1.1 主流浏览器(火狐,google,苹果safari,opera,IE7+)方式

      var xhr = new XMLHttpRequest();

    1.2 IE(6/7/8)方式

      var xhr = new ActiveXObject("Microsoft.XMLHTTP");  //最原始方式

      var xhr = new ActiveXObject("Msxml2.XMLHTTP");  //升级

      var xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0");  //升级

      var xhr = new ActiveXObject("Msxml2.XMLHTTP.5.0");  //升级

      var xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0");  //最高版本方式(停止维护)

    自动识别浏览器:

      if ( typeof XMLHttpRequest != "undefined" ) { ... }

    兼容:

      var xhr;

      if( winodow.XMLHttpRequest ) {

        xhr = new XMLHttpRequest();  /ie7, firefox, chrome, opera, safari ...

      } else {

        xhr = new ActiveObject("Microsoft.XMLHTTP");  // ie5,6

      }

  2. 发起对服务器的请求

  3. 接收服务器返回的信息

    浏览器可以接收的信息 ajax 都可以接收,例如字符串、html 标签、css 样式内容、xml 内容、json 内容等。

  4. get 和 post 方式的 ajax 请求

 

-------------------------------------------------------------------------------------------------------

什么是HTTP

  http 是计算机通过网络进行通信的规则。主要使浏览器能够从服务器请求信息和服务。http 是一种无状态的协议,无状态是不建立持久的连接,也就是说服务端不保留连接的一些相关信息。一个客户端向服务器发送 web 请求,然后 web 服务器返回响应,接着连接就会关闭了,这个处理过程是没有记忆的,如果后续处理需要之前传递的一些信息,那就需要重新的传递。

 

一个完整的 HTTP 请求过程,通常有7个步骤:

  1. 建立 TCP 连接

  2. web 浏览器向 web 服务器发送请求命令

  3. web 浏览器发送请求头信息

  4. web 服务器应答

  5. web 服务器发送应答头信息

  6. web 服务器向浏览器发送数据

  7. web 服务器关闭 TCP 连接

 

一个 HTTP 请求一般由四部分组成:

  1. HTTP 请求的方法或动作,比如是 GET 还是 POST 请求

  2. 正在请求的 url,即请求的地址是什么

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

  4. 请求体,也就是请求正文,请求正文中可以包含客户提交的查询字符串信息,表单信息等

 

GET:

  一般用于信息获取,比如查询,不会影响数据本身

  使用 url 传递参数

  对所发送信息的数量也有限制,一般在 2000 个字符

  发送的信息对任何人都是可见的,因为所有的变量名和值都显示在 url 中

POST:

  一般用于修改服务器上的资源,如发送表单数据,新建、修改、删除等

  对所发送信息的数量无限制

 

一个 HTTP 响应一般由三部分组成:

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

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

3. 响应头,也就是相应正文

如:

  HTTP/1.1 200 OK

  Date: Sun, 23 Nov 2014 10:14:45 GMT

  Server: Apache

  Content-Encoding: gzip

  Content-Length: 7112

  Connection: Keep-Alive

  Content-Type: application/javascript

 

HTTP 状态码由3位数字构成,其中收尾数字定义了状态码的类型:

  1XX: 信息类,表示收到 web 浏览器请求,正在进一步的处理中

  2XX: 成功,表示用户请求被正确接收,理解和处理,例如 200 OK

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

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

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

 

 -----------------------------------------------------------------------------------------------------------------

 

XMLHttpRequest 发送请求:

  • open ( method, url, async )  (发送请求方法,请求地址,请求同步/异步)
  • send ( string )
  • 例如:

  request.open("GET", "get.php", true);

  request.send();

 

  request.open("post", "create.php", true);

  request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

  request.send("name=jim&sex=male");

 

XMLHttpRequest 取得响应:

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

    0:请求未初始化,open 还没有调用

    1:服务器连接已建立,open 已经调用了

    2:请求已接收,也就是接收到头信息了

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

    4:请求已完成,且响应已就绪,也就是响应完成了

  例如:

  var request = new XMLHttpRequest();

  request.open("GET", "get.php", true);

  request.send();

  request.onreadystatechage = function(){

    if(request.readyState === 4 && request.status === 200) {

      // 做一些事情 request.responseText

    }

  }

 

---------------------------------------------------------------------------------------------

 

PHP 是一种创建动态交互性站点的服务器端脚本语言

PHP 能够生成动态页面内容

PHP 能够创建、打开、读取、写入、删除以及关闭服务器上的文件

PHP 能够接收表单数据

PHP 能够发送并取回 cookies

PHP 能够添加、删除、修改数据库中的数据

PHP 能够限制用户访问网站中的某些页面 

 

---------------------------------------------------------------------------------------------

 

JSON 基本概念:

  JSON: javascript 对象表示法(JavaScript Object Notation)

  JSON 是存储和交换文本信息的语法,类似 XML。它采用键值对的方式来组织,易于人们阅读和编写,同时也易于机器解析和生成。

  JSON 是独立于语言的,也就是说不管什么语言,都可以解析 json,只需要按照 json 的规则来就行

JSON 和 XML 比较:

  json 的长度和 xml 格式比起来很短小

  json 读写的速度更快

  json 可以使用 JavaScript 内建的方法直接进行解析,转换成 JavaScript 对象,非常方便

JSON 语法规则:

  JSON 数据的书写格式是:名称/值对

    名称/值对组合中的名称卸载前面(在双引号中),值对写在后面(同样在双引号中),中间用冒号隔开,比如" name " : " amy "

  JSON 的值可以是下面这些类型:

    数字(整数或浮点数),比如 123,1.23

    字符串(在双引号中)

    逻辑值(  true 或 false )

    数组(在方括号中)

    对象(在花括号中)

    null

JSON 解析:

  eval 和 JSON.parse

  在代码中使用 eval 是很危险的,特别是用它执行第三方的 JSON 数据(其中可能包含恶意代码)时,尽可能使用 JSON.parse() 方法解析字符串本身,该方法还可以捕捉 JSON 中的语法错误。

JSON 校验工具:

  JSONLint       地址:jsonlint.com

 

用 jQuery 实现 Ajax

  jQuery.ajax([settings])

    type: 类型,“POST” 或 “GET”, 默认为“GET”

    url: 发送请求的地址

    data: 是一个对象,连同请求发送到服务器的数据

    dataType: 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来之能判断,一般我们采用 json 格式,可以设置为 json

    success: 是一个方法,请求成功后的回调函数。传入返回后的数据,以及包含成功代码的字符串

    error: 是一个方法,请求失败时调用此函数。传入 XMLHttpRquest 对象    

 

jQuery.getJSON(url,data,success(data,status,xhr)) 等价于:

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});


跨域:

  一个域名地址的组成:

    http://    www    .    abc.com    :    8080    /    scripts/jquery.js

     协议    子域名         主域名          端口号          请求资源地址

  当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。

  不同域之间相互请求资源,就算作“跨域”。比如 http://www.abc.com/index.html 请求 http://www.efg.com/service.php

  JavaScript 出于安全方面的考虑,不允许跨域调用其他页面的对象。什么是跨域呢,简单的理解就是因为 JavaScript 同源策略的限制,a.com 域名下的 js 无法操作 b.com 或是 c.a.com 域名下的对象。

  比如:www.abc.com/index.html 调用 www.abc.com/service.php  --  非跨域

        www.abc.com/index.html 调用 www.efg.com/service.php  --  跨域

     www.abc.com/index.html 调用 bbs.abc.com/service.php  --  跨域

     www.abc.com/index.html 调用 www.abc.com:81/service.php  --  跨域

     www.abc.com/index.html 调用 https://www.abc.com/service.php  --  跨域

处理跨域:

  方法一代理:

    通过在同域名的 web 服务器端创建一个代理:北京服务器(域名:www.beijing.com)上海服务器(域名:www.shanghai.com)

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

  方法二JSONP:

    JSONP 可用于解决主流浏览器的跨域数据访问的问题。(JSONP的方式只支持 GET 请求,不支持 POST 请求) 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 ' : ' jim', ' age ' : ' 24 '});

  方法三 XHR2:

    HTML5 提供的 XMLHttpRequest Level2 已经实现了跨域访问以及其他的一些新功能,IE10以下的版本都不支持。

    在服务器端做一些小小的改造即可:

      header(' Access-Control-Allow-Origin:* ');

      header(' Access-Control-Allow-Methods:POST, GET ');

 

posted @ 2020-05-13 21:55  sugar_coffee  阅读(193)  评论(0编辑  收藏  举报