异步交互ajax

一、异步的概念

ajax：asynchronous javascript and xml：直译：异步的javascript和xml - 前端技术

   1、异步交互：客户端向服务器端发起请求直到服务器响应的全过程，用户是不必等待的 - 技术/代码：定时器、ajax
   2、同步交互：客户端向服务器端发起请求直到服务器响应的全过程，用户是需要等待的 - 技术/代码：表单提交、a标签跳转
    不严格定义：页面不会完整刷新，局部改变

3、☆★★★使用的四个步骤

第一步：创建xhr核心对象XMLHttpRequest();

var xhr=new XMLHttpRequest();

第二步：建立和服务器的连接:xhr.open("method","url");

eg:xhr.open("GET/POST","xx.php");

第三步：向服务器端发送请求消息

//GET method
xhr.open("get","url?key=value&...");
xhr.send(null);

//POST method
xhr.open("POST","url");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("key=value&...");

第四步：绑定监听事件：

xhr.onreadystatechange=()=>{
        if(xhr.readyState==4&xhr.status==200){
            xhr.responseText;//接住服务器端响应的消息：php就放在页面上输出的内容就是响应消息
        }    
    }

		xhr.onreadystatechange=()=>{
			if(xhr.status==200&&xhr.readyState==4){
				var jsonTxt=xhr.responseText/XML;
				eval("("+jsonTxt+")")
				JSON.parse(jsonTxt)
			}
		}

备注：

1、GET请求：xhr.send()会失效，但是还不能省略，必须写为xhr.send(null);请求消息需要放到url后面添加?key=value&key=value...

2、POST请求：xhr.send可用，但是必须在之前加上一句话设置请求头部

4、★★★面试题：HTML、XHTML、DHTML、XML分别是什么？

HTML - 网页
XHTML - 更严格的网页
DHTML - 动态特效的网页：并不是新技术、新概念，现有技术的整合统称：HTML+CSS+JS(DOM) - 离线网页也就有动态特效
XML - 配置文件 | 数据格式

二、使用xml（其实就是一个后缀.xml的文件）

    1、创建.xml文件
    2、必须写上声明标签：<?xml version="1.0" encoding="utf-8"?>
            version - 版本：目前的版本只有1.0 和 1.1 但1.1升级并不理想，没有人使用，以后都不必在学了，已经淘汰了
            encoding - 编码格式
    3、必写写上一个根标签，而且只能写一个根标签（双标签），没有任何的预定义标签，所有的标签全都自定义
     eg： <root></root>
    4、里面你随意。想放什么标签就放什么标签

    5、前端：依然使用ajax去获取xml：
        1、url 写 "xx.xml";
        2、xhr.responseXML 获取响应的xml文件，跟DOM差不多
        3、可以使用【核心DOM】去找到自己需要的部分

三、JSON：javascript Object Notation：js对象表示法，本身就是js的一部分

1、JSON字符串：后端把数据库的数据取出来整理为一个JSON字符串：

        1、'[1,2,3,4]'
        2、'{"key":value,...}'
        3、'[{},{},{},{}]'
        4、'{"names":[ ],"ages":[ ],...}'

2、PHP如何将数据变为JSON字符串：

echo JSON_encode($arr);
 var jsonTxt=JSON.stringify(jsonObj);//node.js（俗称脱衣服）

    3、前端：依然使用ajax去获取json数据

        1、xhr.open("GET","xx.php/jsp/net/js");
        2、xhr.responseText;
        3、将json字符串转为对象数据：
            法一、eval("("+jsonTxt+")");
            法二、JSON.parse(jsonTxt);

 四、一切的框架的目的都是为了：简化DOM、AJAX开发

 1、第一层：最麻烦，最复杂，最无敌

$.ajax({//解构赋值，暂时理解为，我们传入一个对象是一个配置信息
        "url":"xx.php",//要连接的服务器的路径，必写参数
        "type":"GET/POST",//请求的类型，可以省略不写，默认为GET
        "data":"key=value&key=value",//要向服务器发送请求消息
        "dataType":"HTML/XML/JSON/JSONP",//服务器端响应的消息要解析为什么数据格式，默认值为HTML
        "jsonp":"通行令名字",//默认为callback
        "success":(data)=>{//ajax成功的时候执行：形参data自动保存住服务器端响应的消息，必写参数        
        }
    })

 2、第二层：再次简化：3个：唯一的缺点，不能做跨域

1）$("xx").load("url","data",callback); -
        缺点：①数据会直接放在xx元素上
                   ②无法设置GET/POST，只能默认为GET
                   ③无法直接给到可用数据

2）$.get("url","data",callback,"JSON")

3）$.post("url","data",callback,"JSON")

3、第三层： - 特殊用法：合作开发

同源策略：浏览器的保护机制，要求协议、域名、端口都要相同，只要有一个不同则会触发同源策略的保护
    跨域：跨过同源策略：能够访问别人电脑上的数据库

    前端：ajax，jQuery封装的ajax里面，自带一个jsonp的技术：帮助我们跨域
        $.getJSON("url?key=?","data",callback)

        注意：1、?是固定写法，jQuery中jsonp会自动将他赋值为一个通行令函数

    后端：需要接收住前端传来的通行令函数，并且调用此函数放行
        echo $_GET["key"]."(".JSON_encode($arr).")";

 4、Git分支：

        创建分支：git branch 分支名
        查看分支：git branch
        切换分支：git checkout 分支名
        合并分支：git merge 分支名
        删除分支：git branch -d 分支名