ajax全接触

Posted 2020-08-14

Ajax 全接触

概念介绍

1. 异步：

   1. 指某段程序执行时不会阻塞其他程序执行，其表现形式为程序的执行顺序不依赖程序本 身的书写程序，相反则为同步。其优势在于不阻塞程序的执行，从而提升整体执行效率。

2. 实现异步的大致流程：

   1. 运用html和CSS来实现页面，表达信息
   2. 运用XMLHttpRequest和web服务器进行数据的异步交换
   3. 运用javascript操作DOM，实现动态局部刷新。

3. http：使计算机通过网络进行通信的规则。

   1. 是一种无状态的协议。也就是不建立持久的链接。

4. http请求的过程：

   1. 建立TCP连接（TCP：传输控制协议。TCP连接是互联网链接协议的一种。其特征为：有序和可靠）
   2. Web浏览器向Web服务器发送请求命令
   3. Web浏览器发送请求头信息
   4. Web服务器应答
   5. Web服务器发送应答头信息
   6. Web服务器向浏览器发送数据
   7. Web服务器关闭TCP连接

5. 一个HTTP请求一般由四部分组成：

   1. HTTP请求的方法或动作，比如是GET还是POST请求
   2. 正在请求的URL
   3. 请求头，包含一些客户端环境信息，身份验证信息等
   4. 请求体，也就是请求正文。请求正文中可以包含客户提交的查询字符串信息，表单信息等等。

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

   1. 一个数字和文字组成的状态码，用来显示请求是成功还是失败
   2. 响应头：和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等。
   3. 响应体：也就是响应正文

7. GET请求和POST请求的区别：

   1. GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
   2. POST：一般用于修改服务器上的资源，对所发送信息的数量无限制

8. HTTP状态码有3位数字构成，其中首位数字定义了状态码的类型：

   1. 1XX：信息类，表示收到Web浏览器请求，正在近一步处理中
   2. 2XX：成功，表示用户请求被正确接收、理解和处理。例如：200 ok
   3. 3XX：重定向，表示请求没有成功，客户必须才去进一步的动作。
   4. 4XX：客户端错误。表示客户端提交的请求有错误。例如：404 NOT Found。
   5. 5XX：服务器错误，表示服务器不能完成对请求的处理。例如：500

9. XMLHttpRequest放松请求：

   1. open（method，url，async）
      
      • method：请求的方式
      • url：请求的地址（相对或绝对）
      • async：是否异步（异步：true），默认值就为true。
   2. send（string）。请求的内容。
      
      • 如果是get请求则为send（null）
      • 如果是post请求则为send（内容），里面的内容用&拼接
   3. 如果是post请求时，还要请求头setRequestHeader（‘Content-type’，‘application/x-www-form-urlencoded’）

10. XMLHttpRequest取得响应

    1. responseText：获得字符串形式的响应数据
    2. responseXML：获得XML形式的响应数据
    3. status和statusText：以数字和文本形式返回HTTP状态码。
    4. getALLResponseHeader（）：获得所有的响应报头
    5. getResponseHeadr（）：查询响应中的某个字段的值
    6. readyState属性：
       
       • 0：请求未初始化，open还没有调用
       • 1：服务器连接已建立，open已经调用了
       • 2：请求已接收，也就是接收到头信息了
       • 3：请求处理中，也就是接收到响应主体了
       • 4：请求已完成，且响应已就绪，也就是响应完成了。
       • 可以通过onreadystatechange來监听readyState值的变化。

11. php大致介绍：

    1. PHP是一种创建动态交互性站点的服务器端脚本语言。
    2. #####php的大致功能：
       
       • 能够生成动态页面内容。
       • 能够创建、打开、读取、写入、删除以及关闭服务器上的文件
       • 能够接收表单数据
       • 能够发送并取回cookies
       • 能够添加、删除、修改数据库中的数据
       • 能够限制用户访问 网站中的某些页面。
       • 基本服务器语言可以做的都可以。

12. JSON：

    • Javascript对象表示法（Javascript Object Notation）
    • JSON是存储和交换文本信息的语法，类似XML。他采用键值对的方式来组织、易于人们阅读和编写，同时也易于机器解析和生成
    • JSON是独立于语言的，也就是说不管什么语言，都可以解析json，只需要按照json的规则来就行。
    • JSON和xml相比的优势
    • • json的长度和xml格式比起来很短小
      • json读写的速度更快
      • json可以使用Javascript内建的方法进行解析，转换成Javascript对象，非常方便。
      • Json语法规则
      • • JSON数据的书写格式是：名称/值对。注意数据都要用双引号括起来
        • JSON的值可以是下面这些类型
        • 1. 数字（整数或 ）
          2. 字符串（在双引号中）
          3. 逻辑值（true or false）
          4. 数组（在方括号中）
          5. 对象（在花括号中）
          6. null
    • • 用jquery实现Ajax：
      • • 语法：jQuery.ajax（[ settings]）
        • type：类型，‘POST’或‘GET’，默认为‘GET’
        • url：发送请求的地址
        • data：是一个对象，连同请求发送到服务器的数据。
        • dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为‘json’
        • success：是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串
        • error：是一个方法，请求 失败时调用此函数。传入XMLHttpRequest对象
      • 跨域：
      • • 一个域名地址的组成： 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域名下的对象。
        • 注意：一个主域名下可以有很多子域名。
        • 处理跨域的方法：
        • • 代理：通过在同域名的web服务器端创建一个代理。
          • • 北京服务器（域名：www.beijing.com）伤害服务器（域名：www.shanghai.com）
            • 比如在北京的web服务器的后台（www.beijing.com/proxy-shanghaiservice.php）来调用上海服务器（www.shanghai.com/service.php）的服务，然后再把响应结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。
          • 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":‘洪七‘,‘age‘:24});
      • • • • 只能get请求。无法处理post请求。
            • postmessage解决跨域的？？？？？？
            • cros
        • • XHR2
          • • HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能
            • ie10一下的版本都不支持
            • 在服务器端做一些小小的改造即可：
            • • header（‘Access-Control-Allow-Origin：*’）；
              • header（‘Access-Control-Allow-Methods:POST，GET’）；