Ajax

layout: post
title:  ajax 
tags: javascript ajax 
categories: javascript ajax 

1.什么是ajax：异步javascript和XML。

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式

无刷新读取数据。无需加载整个页面的情况下，刷新页面某一部分。常用的地方：用户注册和聊天室。

ajax基础

var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
//ajax能且仅能从服务器上读取文件信息
    ajax('aaa.txt',function(str){alert(str);});
}

有一个aaa.txt的文件，内容为“大家好”，则通过ajax的读取，能在浏览器中显示出txt的内容。

==注意==：保存的txt文件也必须是utf-8编码，否则不是乱码就是出错

请求并显示静态txt文件字符集编码：utf-8编码缓存、阻止缓存，利用url中的‘abc.txt?t=’+new Data().getTime()（毫秒数）

for(var i=0;i<aBtn.length;i++){
    aBtn[i].index = i;
    aBtn[i].onclick = function(){
        ajax((this.index+1)+".txt?t="+new Date().getTime(),function(str){
            oDiv.innerHTML = str;
        })
    }
}

有三个文件，分别为1.txt：数据一；2.txt：数据二；3.txt：数据三；通过上述数据则可以在点击相应按钮时显示相应txt文本里的内容；

动态数据：请求js（或json）文件在服务器上读到的东西全部是以文本（string）的方式，因此无法拿到数组或者json，需要用eval。 eval(str)的使用：讲字符串转换成js代码。服务器上更多的是放的json或由json组成的数组。

ajax请求的步骤 1.创建XMLHttpRequest 不同浏览器使用的异步调用对象也有所不同，在IE浏览器中异步调用使用的是XMLHTTP组件中的XMLHttpRequest对象，而在Firefox浏览器中则直接使用XMLHttpRequest组件。

    var xmlHttp = null;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();//ie6及以下不兼容，针对主流浏览器
    }else{                             // 针对ie5, ie6
        xmlHttp = new ActiveXObject("Microsoft,XMLHTTP");
    }

2.连接服务器

    xmlHttp.open('GET',url,true);  //xmlhttp.open(method,url,async)

method 包含 get 和 post两种方法 url主要是文件或资源的路径，async参数为true(代表异步)或者false（代表同步）

get和post的区别：（1）是有那个get请求时，参数在url中显示，而使用post方式，则不会显示出来。（2）使用get请求发送数据量小，post请求发送数据量大（3）get请求需注意缓存问题，post请求不需要担心这个问题。

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求： 1.无法使用缓存文件（更新服务器上的文件或数据库） 2.向服务器发送大量数据（POST 没有数据量限制） 3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

3.向服务器端发送请求 xmlHttp.send();

4.接受服务器的返回

    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4){   //判断交互是否成功
            if(xmlHttp.status == 200){    //获取服务器返回的数据   获取纯文本数据
                //alert('成功：'+xmlHttp.responseText);
                fnSucc(xmlHttp.responseText);
            }else{
                //alert('失败');
                if(fnFaild){
                    fnFaild();
                }
            }
        }
    }

总的代码如下：

function ajax(url,fnSucc,fnFaild){
    // 参数;1.连接服务器的地址 2.成功时函数 3，失败时函数
    // 1. 创建xmlhttprequest对象
    var xmlHttp = null;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();//ie6及以下不兼容，针对主流浏览器
    }else{                             // 针对ie5, ie6
        xmlHttp = new ActiveXObject("Microsoft,XMLHTTP");
    }
    //2. 连接服务器
    xmlHttp.open('GET',url,true);  //xmlhttp.open(method,url,async)
    // method 包含 get 和 post两种方法 url主要是文件或资源的路径，async参数为true(代表异步)或者false（代表同步）
    // 如： xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true); 
    //3.向服务器端发送请求
    xmlHttp.send();
    //xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    //xmlhttp.send("fname=Henry&lname=Ford");
    //4.接受服务器的返回
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4){   // 判断交互是否成功
            if(xmlHttp.status == 200){      //获取服务器返回的数据  获取纯文本数据
                //alert('成功：'+xmlHttp.responseText);
                fnSucc(xmlHttp.responseText);
            }else{
                //alert('失败');
                if(fnFaild){
                    fnFaild();
                }
            }
        }
    }
} 

XMLHttpRequest取得相应

responseText:获得字符串形式的响应数据
responseXML：获得xml形式的响应数据
status和statusText：以数字和文本形势返回http转态码
getAllResponseHeader():获得所有的相应
getResponseHeader()：查询相应中的某个字段的值
readState属性

readystate的五种返回值所代表的意义：

0（未初始化）还没调用open（）方法
1（载入）已经调用send方法(),正在发送请求
2（载入完成）send（）方法已经完成，已收到相应
3（解析）正在解析响应内容
4（完成）相应内容解析完成，可在客户端调用。

ajax中status几种常态说明：

100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功
201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错

Ajax 解决浏览器缓存问题在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,”0”)。在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,”no-cache”)。在URL后面加上一个随机数： “fresh=” + Math.random()。在URL后面加上时间搓：”nowtime=” + new Date().getTime()。如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

Jun 18, 2023