Ajax

一、ajax入门
1. 什么是ajax?
ajax不是一种开发语言，它是在现有的js/html/css样式基础上，实现在不重新加载整个页面的情况下，与服务器进行简单的数据交互，通过js操作DOM进行页面局部更新.

2. ajax的应用介绍：搜索建议，表单验证，点击下一页，等等等等

3. ajax概念: 
    Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
    Ajax = 异步 JavaScript 和 XML （标准通用标记语言的子集）或者是 HTML。
    Ajax 是一种用于创建快速动态网页的技术。
    Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
    通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

二、ajax原理
1. ajax服务器交互原理?
简单来说通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面

2. ajax进行页面渲染
    渲染： 就是向服务器请求数据后，把数据追加到页面中，这个过程就叫渲染

三、(了解)ajax和传统web渲染数据的区别和优缺点
1. 传统web渲染介绍
用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件，然后浏览器从head标签开始逐行解析HTML代码，
遇到link标签又会向服务器请求加载css文件，遇到script标签又会向服务器请求js文件

2. ajax渲染数据的优缺点
    优点：
        <1>.无刷新更新数据
                AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，
                并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
        
        <2>.异步与服务器通信。
                AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
                优化了Browser（浏览器）和Server（服务端）之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。

        <3>.前端和后端负载平衡。
                AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，
                减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，
                可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。

        <4>.基于标准被广泛支持。
                AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。
                随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，
                为那些不支持JavaScript的用户提供替代功能。

        <5>.界面与应用分离。
                Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、
                也更加适用于现在的发布系统。

    缺点：
        <1>.AJAX干掉了Back和History功能，即对浏览器机制的破坏。

        <2>.对搜索引擎支持较弱。
            ajax请求不利于搜索引擎优化，一般搜不到ajax添加到页面的信息！

        <3>.破坏程序的异常处理机制。
            
        <4>.违背URL和资源定位的初衷。
            例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。

3. ajax与传统web渲染区别
    (1). 客户端处理方式不同：传统web需要重新加载整个页面，才可以实现数据更新.  
    (2).提交方式不同，传统web向服务交互时，通过浏览提交整个页面，ajax通过javascript中的XMLHttpRequest对象提交.
    (3).服务器响应不同:
	传统的web返回的整个页面，而ajax只返回极少量的需要的数据.

http://127.0.0.1:5500/

1、 起本地服务 GO LIVE
当前本地起动服务器的目录 就是 服务器根目录
2、 在本地自己写一个数据 txt
3、 <1>.创建XMLHttpRequest对象
var xhr=new XMLHttpRequest(); // 非ie
var xhr=new ActiveXObject(); // ie

  var   ev  = ev || window.event;  // 兼容IE 的写法
    兼容写法
        var xhr;
        if(window.XMLHttpRequest){   
            xhr=new XMLHttpRequest();
        }else{
            xhr=ActiveXObject();
        }
        
    <2>.对象初始化(配置) 连接到服务器
        xhr.open("GET","url",true)   // 打开txt文件 复制上面的路径
    <3>.向服务器发送请求
        xhr.send()
    <4>.等服务器响应变化
        xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200) // 完成并不一定成功,需要status来检测是成功还是失败
    <5>.读取服务器返回的文本内容
            responseText:从服务器返回来的文本
            var data=xhr.responseText;    //  纯文本字符串
            4、把数据渲染到页面上

        }

四、 ajax原生实现
1. 原生ajax案例演示
2. XMLHttpRequest对象，步骤
<1>.创建XMLHttpRequest对象
var xhr=new XMLHttpRequest();
<2>.对象初始化(配置)
xhr.open(“GET”,“url”,true)
<3>.向服务器发送请求
xhr.send()
<4>.等服务器响应变化
xhr.onreadystatechange=function(){
if(xhr.readyState4&&xhr.status200)
<5>.读取服务器返回的文本内容
var data=xhr.responseText;
}

3. 服务器返回响应码介绍

    readyState为响应码，响应码共5个：
        0:未初始化
        1:向服务器发送请求
        2:服务器已经接收请求
        3:服务器正在处理数据
        4:服务器准备就绪

4. 服务器http返回的状态码

    http返回的状态码有以下几种
        404:资源未找到
        301:永久重定向 页面 302 ： 暂时重定向 页面
        200:一切"ok"  响应成功！
        403:拒绝访问
        503:能与服务相连但web服务器不能正常工作
        500:服务器错误

五、 如何发get|post请求
1. ajax使用get请求
xhr.open(“GET”,“url”,true)
2. ajax使用POST请求
xmlhttp.open(“POST”,“url”,true)

六、 json数据
json是一种轻量级的数据交换格式
1. javscript中的数组与对象表示方法
2. json数据文件方法及应用
3. 字符串与json类型相互转换

    注：json文件不能写注释，字串必须用双引号，键和值都是双引号
    JSON.parse()     将json字符串转换为json对象
    JSON.stringify() 将json对象转换为json字符串