ajax原理

Posted 2020-09-30 峰SirLee

AJAX即“Asynchronous Javascript And XML”（异步javascript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。[1] 

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

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

#ajax
>异步的javascript和XML
>ajax() 方法通过 HTTP 请求加载远程数据。
##wamp 
 * w:windows
 * a:apache 服务器:接收和响应数据
 * m:mysql 数据库操作软件
 * p:php 
 
##ajax用途
 * ajax 名词
    * Asynchronous Javascript And XML 并不是ajax的缩写
    * Asynchronous（async）异步
    * xml 可扩展标记语言 用于数据的传输
    * json js原生对象描述法
 * 功能：【页面不刷新的前提下，实现前台和后台的数据交互的一种技术(并不是语言)】
    * 用javascript去获取数据 用dom的方法操作文档的内容 通过xhr对象完成数据的发送 xml/json/txt/html/md是数据发送时的一种格式
 *  传统与ajax区别
    * 传统的前台后台监护模式
        * form实现交互(表单提交必须写name属性)
        * 前台提交数据-->后台接收数据处理返回数据-->刷新显示一个新的html页面
    * 通过ajax实现数据交互
        * 网页不用刷新
        * 所有的发送接收操作都通过XMLHttpRequest对象来完成
        * 操作dom
 * xhr对象操作
    * 1.实例化对象 
        >var xhr=new XMLHttpRequest() 【IE6中：new ActiveXObject("Microsoft.XMLHTTP")】
    * 2.配置请求
        >xhr.open();
        * 1.发送方式  get  post
        * 2.发送地址(如果是get形式发送,发送内容要连接到地址后面，如果是post,不用)
        * 3.是否异步(默认true为异步)
    * 3.发送请求
        >xhr.send()  (如果请求时post形式的 把要发送的数据放到send的参数里面)
    * 4.接收响应 检测响应的完成
        >xhr.onload=function(){}
        >onreadystatechange   readyState   status
        >onload
        
        >ajax1.0
        * responseText 以文本的方式接收响应的内容
        * responseXML 以XML的格式接收响应的内容
        >ajax 新
        * responseType=""  指定要接收的格式  text json  document arraybuffer  buffer
        * reponse 只表示接收内容(与上步结合)
        
##异步的
 * 同步：按照顺序依次执行
 * 异步：同时去处理多个问题(ajax默认)(默认true为异步)

##get post
 * get 把数据连接到地址栏的后面发送  传输数据量小  速度比较快  安全性比较低
 * post 把数据插入到请求信息里面去发送  数据量比较大  速度相对慢  安全性相对较高(Network--xxx.php--Headers--Form Date可查看)
 
 
##  json    jsonp 
 * json 是一种数据的结构化写法   用于前台后台数据交互的一种数据格式
 * jsonp (json with padding)(包裹) 数据传输方式 是一种前台后台数据交互的一种方式
    * jsonp 解决跨域问题 后台
    * 原理：通过script标签去加载资源的时候，没有跨域问题
 * ajax 同源策略 只能请求位于同一个域名下的文件
    * 同源：协议 主机名 端口号 必须一致才叫同源