Ajax入门（一）从0最先到一次胜利的GET要求

搬运自个人博客
传统表单在提交后悉数页面都革新

什么是服务器

网页阅读历程剖析

一个完全的HTTP要求历程,平常有下面7个步骤

1. 竖立TCP衔接

2. Web阅读器想Web服务器发送要求敕令

3. Web阅读器发送要求头信息

4. Web服务器- 应对

5. Web服务器- 发送应对头信息

6. Web服务器- 向阅读器发送数据

7. Web服务器- 封闭TCP衔接

怎样设置本身的服务器顺序(AMP)

Ajax必需在服务器环境下才平常运用

• 我运用的WampServer顺序.(支撑中文)官网衔接.能够速率不可,不过科学上网,人人应当都邑.

• 网上的运用教程:怎样装置运用

• XAMPP–我试了一下,照样wamp简朴,人人有兴致就本身去测试了

Ajax道理

什么是Ajax?

• 无革新数据读取

  • 用户注册/在线聊天室

  • 明白同步和异步(基本都用异步要求).

  同步: 客户端提议要求–守候–>服务器端处置惩罚—守候–>相应–>页面载入 (要求毛病时悉数从新载入).
  异步: 客户端提议要求—>服务器端处置惩罚—>相应—>页面载入(填写时,立即更新,部份返回).

HTTP要求

• 一个HTTP要求平常由四部份构成

  1. HTTP要求的要领或行动如是GET照样POST要求

  2. 正在要求的URL,总得晓得要求的地点是什么吧?

  3. 要求头,包括一些客户端环境信息,身份验证信息等

  4. 要求体,也就是要求正文,要求正文中能够包括客户端提交的查询字符串信息,表单信息等等.
     

HTTP相应

• 一个HTTP相应平常由三部份构成:

  1. 一个数字和笔墨构成的状况码,用来显现要求是胜利照样失利

  2. 相应头,相应头和要求头一样包括很多有效的信息,比方服务器范例,日期时候,内容范例和长度等.

  3. 相应体,也就是相应正文.
     

HTTP要求体式格局

罕见的HTTP状况码

编写Ajax

类比打电话明白Ajax编写步骤

1.建立Ajax对象

• IE6:ActiveXObject("Microsoft.XMLHTTP");//IE6已死,能够不斟酌了

• XMLHttpRequest();

例:var request = new XMLHttpRequest();

2.衔接服务器

• open(method,url,async);

• open(发送要求要领”GET/POST” ,(要求地点”文件名”) ,是不是异步传输)

例: request.open("GET","get.json",true);

3.发送要求

• send(string)

  • 在运用GET体式格局要求时无需填写参数

  • 在运用POST体式格局时参数代表着向服务器发送的数据

//完全的GET要求
var oAjax = new XMLHttpRequest();//建立Ajax对象
oAjax.open("GET","create.php",true);//衔接服务器
oAjax.send();//发送要求

//完全的POST发送要求
var oAjax = new XMLHttpRequest();//建立
oAjax.open("POST","create.php",true);//"POST"
oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//设置HTTP头信息.必需在open与send之间,不然涌现异常.
oAjax.send("name=陈二狗&sex=男");//发送给服务器的内容

4.吸收返回-要求状况监控

• XMLHttpRequset取得相应

• onreadystatechange事宜

经由过程监听onreadystatechange事宜,来推断要求的状况.

• readyState属性:相应返回所处状况

例:

//基本完全的一个Ajax要求
var request = new XMLHttpRequest();
request.open("GET","get.json",true);
request.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            //相应胜利,做一些事变
        } else {
           //相应失利,做一些事变
        }
    }
};

运用函数简朴的封装一个get要求

/**
 * 一个简朴的异步get要求
 * @param {String}   url     要求地点,文件名
 * @param {Function} fnSucc  要求胜利时实行的函数,形参为为猎取的字符串值.
 * @param {Function} fnFaild 要求失利实行的函数,可选参数
 */
function get(url, fnSucc, fnFaild) {
    //1.建立ajax对象
    var oAjax = null
        //此处必需须要运用window.的体式格局,示意为window对象的一个属性.不存在是值为undefined,进入else/若直接运用XMLHttpRequest在不支撑的情况下会报错
    if (window.XMLHttpRequest) {
        oAjax = new XMLHttpRequest();
    } else {
        //IE6以上,如今应当不须要斟酌IE6了
        oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.衔接服务器
    //open(要领,url,是不是异步)
    oAjax.open("GET", url, true);
    //3.发送要求
    oAjax.send();
    //4.吸收返回
    //OnRedayStateChange事宜
    oAjax.onreadystatechange = function () {
        if (oAjax.readyState === 4) {
            if (oAjax.status === 200) {
                fnSucc(oAjax.responseText);
            } else {
                if (fnFaild) {
                    fnFaild();
                }
            }
        }
    };
}

运用Ajax

基本:要求并显现静态TXT文件

• 字符集编码:不一致时会涌现乱码

• 缓存,阻挠缓存,(运用时候对象增加)

动态数据:要求JS(或JSON)文件

注：并不引荐运用eval，并不引荐运用eval，并不引荐运用eval。 由于eval剖析数据时会有一系列问题涌现。这里是由于只是进修就随便点了。
在须要剖析要求数据时，引荐运用JSON的要领JSON.parse()能够将一个 JSON 字符串剖析成为一个 JavaScript 值。参考MDN-JSON

• eval的运用
  例:

var str = "54-8*6+4";
alert(eval(str)); //10;

var str1 = "[1,2,3]";   
var arr = eval(str1);
alert(arr[1]);//2

var str3 = "function show(){alert('abc');}";
eval(str3);
show() //abc

一次胜利的get要求

//已引入get函数
//数据文件放在同级目录下就好了。

get("json.js", function (str) {
    var arr = eval(str);
    alert(arr[0].a);
}, function () {
    alert("服务器要求失利!");
});
//json.js寄存的文件以下
/*
    [{
        a: 12,
        b: 5
    }, {
        a: 2,
        b: 56
    }]
*/
//服务器相应胜利时,将返回12.

• DOM建立元素

  • 部分革新:要求并显现部份网页文件,运用for轮回.

  • 这里是属于DOM操纵的局限，在这里就不过量报告了。