Ajax实现异步请求

基本步骤：创建XMLHttpRequest对象-->配置发送参数-->执行发送-->处理响应

ajax 通俗讲有四个步骤

1.创建Ajax对象
2.链接到服务器
3.发送请求
4.接受返回值

1.创建对象

　　var xhr = null;

    if(window.XMLHttpRequest){

        标准浏览器

        xhr = new XMLHttpRequest();

    }else{

        非标准浏览器IE6/7/8

        xhr = new ActiveXObject('Microsoft.XMLHTTP');

    }

对于前面要在if中加window判断是因为，浏览器会对未定义值的变量读取时报错 ，而对于window.variable不会报错，而是报undefined.

2.连接服务器

首先理解同步与异步
同步：事情一件一件来
异步：多件事情一起做
而ajax就是为了异步而生的,例如用户请求表单后，提交到服务器的过程，用户不用等待，可以干别的事情。。。。。。

　　 var type = 'get';

    var myurl = './data.php';

    var async = false;//第三个参数默认值就是true,表示异步；false表示同步

    xhr.open(type,myurl,async);

3发送请求

//发送请求

　var param = null;

  xhr.send(param);

4.接受请求

主要是判断浏览器和服务器的交互进度和结果

        xhr.onreadystatechange=function(){
            //oAjax.readyState浏览器和服务器的交互情况
            if(oAjax.readyState == 4)//读取完成
            {
                if(oAjax.status==200)//http状态码,用来判断是否成功接受并返回文件
                {
                    alert(oAjax.status+" Success" +oAjax.responseText);//读取响应文件里面的TEXT
                }else{
                    alert(oAjax.status+" NotFound");
                }
            }
        };

A、处理响应中的status （xhr.status == 200 ）：

xhr.status是http协议的状态码：200成功、404没有找到资源、500服务器报错

ajax清除缓存：

    //将文件名设置随系统时间改变而改变，这样可以避免浏览器缓存旧数据
    oAjax.open('GET','./a.txt?t='+new Date().getTime(),true);

B、XMLHttpRequest取得响应：

(1)responseText:获得字符串形式的响应数据

(2)responseXML:获得xml形式的响应数据

(3)status和statusText：以数字和文本形式返回Http转态码

(4)getAllResponseHeader():获得所以得响应报头

(5)getResponseHeader():查询响应中的某个字段的值

(6)readState属性

"0"请求未初始化，open还未调用

"1":服务器连接已经建立，open已调用

"2":请求已接收，也就是接收到头信息了

"3":请求处理中，也就是接收到响应主体了

"4":请求已经完成，且响应就绪，响应完成了

C、注意事项：

    1、xhr的对象创建需要兼容处理

    2、xhr.open的3个参数的作用

    3、xhr.readyState状态值要了解

    4、通过xhr.responseText获取服务器响应的数据

    5、对于get请求来说，xhr.send()的参数固定写成null

    6、xhr.status和xhr.readyState的作用和区别

D、阻止表单提交的几种方式：

 1.return false;

 2.e.preventDefault();

 3. <input type="submit" value="提交" id="btn">把“submit”换成“button”

E、Ajax-get提交：

Aja的get提交数据是通过url传递参数，并且需要对参数进行编码处理

xhr.send();方法参数固定为null

2.配置发送函数
            encodeURI作用对get参数进行编码处理，防止乱码
            var param = encodeURI('?username='+uname+'&password='+pw);
            xhr.open('get','./data.php'+param);
3.发送
            xhr.send(null);

F、Ajax-post提交：

Ajax的post提交方式通过xhr.send();

函数传递的参数发送数据，而不是通过url传递数据

post提交方式必须设置请求头

post提交的数据不需要进行编码处理

2.配置发送函数
               xhr.open('post','./33data.php');
               //设置请求头信息(对于post提交必须设置请求头)
               xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode');
3.发送
               var param = 'username='+uname+'&password='+pw;
               xhr.send(param);

G、post和get的区别：

get	post
2.配置发送函数             encodeURI作用对get参数进行编码处理，防止乱码             var param = encodeURI('?username='+uname+'&password='+pw);             xhr.open('get','./data.php'+param); 3.发送             xhr.send(null);	2.配置发送函数                xhr.open('post','./33data.php');               设置请求头信息(对于post提交必须设置请求头)                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 3.发送                var param = 'username='+uname+'&password='+pw;                xhr.send(param);
1、Aja的get提交数据是通过url传递参数，并且需要对参数进行编码处理 2、xhr.send();方法参数固定为null	1、Ajax的post提交方式通过xhr.send(); 函数传递的参数发送数据，而不是通过url传递数据 2、post提交方式必须设置请求头（   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode'); ） 3、post提交的数据不需要进行编码处理

 

H、HTTP请求:是一种规则，无状态，无记忆：

  HTTP请求过程

（1）建立TCP连接

（2）web浏览器向web服务器发送请求指令

（3）web浏览器发送请求头信息

（4）web服务器应答

（5）web服务器发送应答头信息

（6）web服务器向浏览器发送数据

（7）web服务器关闭TCP连接

 

I、HTTP请求的4个·组成部分：

    a、HTTP请求方法或者动作(GET/POST)

     b、正在请求的URL

     c、请求头，包含客户环境信息、身份信息等

     d、请求体（正文），包含客户提交的查询字符串信息、表单信息

 

J、POST和GET方法：

     GET:(1)用于信息获取

               (2)使用URL传递参数

                (3)String<=2000个字符左右

     POST:(1)用于修改服务器上的资源

                 (2)String<=无穷大

 

K、一个HTTP响应由三个部分组成：

       a、一个数字和文字组成的转态码。作用：显示请求是否成功

       b、响应头，包含服务器类型、日期、内容类型、长度等

       c、响应体，即响应正文，字符串、HTML等

 

L、HTTP状态码由3个数字构成，其中首位数字定义了状态码的类型：

    1^^：信息类，表示收到web请求，正在进行处理中

    2^^：成功，表示用户请求被正确接收、理解和处理，如200

    3^^：重定向，表示请求未成功，客户必须采取动作

    4^^：客户端错误，客户提交的信息有误，如400

    found:意味着请求中所引用的文档不存在

    5^^：服务器错误（最难处理的问题）,表示服务器不能完成请求处理，如500