ajax技术基础详解

一、概述

1、什么是ajax

可以与服务器进行[异步]交互的技术，浏览器无需刷新

2、什么时候出现ajax？

—- XMLHttp 微软

1999年微软公司发布IE5版本，内嵌了ajax技术

什么时候流行使用

2005年

google 公司发布产品 gmail邮箱服务，里边有使用ajax

javascript从此也被人们重视起来

什么地方可以使用ajax

3、应用场景

百度搜索效果

ajax无刷新分页

用户名是否被占用的校验

实现网页局部信息的刷新

具体应用：

163用户注册

传统的表单验证：

ajax表单验证

二、ajax 技术基础

ajax是javascript的一门技术

ajax涉及到的具体技术点：

javascript
XMLHttpRequest（ajax对象） (重点)
html
css
xml
dom

使用ajax的过程就是对象调用属性和方法的过程。

1、ajax对象创建

创建对象具体操作

    var obj = new XMLHttpRequest();   主流浏览器(火狐、google、苹果、opera)

    var obj = new ActiveXObject(“Microsoft.XMLHTTP”);  IE低版本浏览器创建对象

(1) . IE低版本创建ajax对象不同版本

//低版本IE创建对象

    //var obj = new ActiveXObject("Microsoft.XMLHTTP");  //最低版本

    //var obj = new ActiveXObject("Msxml2.XMLHTTP");  //较高版本

    //var obj = new ActiveXObject("Msxml2.XMLHTTP.3.0");  //较高版本

    //var obj = new ActiveXObject("Msxml2.XMLHTTP.5.0");  //较高版本

    //var obj = new ActiveXObject("Msxml2.XMLHTTP.6.0");  //最高版本

(2). 主流浏览器创建ajax对象

var obj = new XMLHttpRequest();

(3). 把创建对象的代码封装为一个函数

<script type="text/javascript">

    function createXHR(){

        //根据不同浏览器使用不同方式ajax对象

        //IE7及更高版本已经集成XMLHttpRequest实例化ajax方法

        var obj = null;

        if(window.XMLHttpRequest){

            //创建ajax对象-主流浏览器

            obj = new XMLHttpRequest();

        } else {

            //以上ajax对象需要根据浏览器情况选择最新的版本使用

            var version = ['Msxml2.XMLHTTP.6.0sljdlksd','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP'];

            for(var i in version){

                try{

                    //如果obj==undefined，就走catch，但是程序不会停止

                    obj = new ActiveXObject(version[i]);

                    break;

                } catch (e){

                }

            }

        }

        return obj;

    }

    var xhr = createXHR();

    alert(xhr);

</script>

2、ajax对象的成员属性和成员方法

(1) 成员属性

(2)成员方法

ajax和浏览器访问页面信息都是走的http协议。

3、通过ajax向服务器发起请求request

<html>

    <head>

        <title>新建网页</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <body>

   <script>

     //向服务器发起请求

        function f1(){

            //1 创建ajax对象

            var xhr = createXHR();

            //2. 打开http请求

            xhr.open('get','./02.php');

            //3. 发送请求

            xhr.send(null);

        }

      </script>

        <h2>请求</h2>

        <input type="button" value=" 触发" onclick="f1()" />

   </body>

</html>

4 、ajax接收服务器相应response

<script>

function f1(){

    //1 创建ajax对象

    var xhr = createXHR();

    //我们可以通过技术手段感知ajax不同的状态（5种）

    //alert(xhr.responseText);

    xhr.onreadystatechange = function(){

        //ajax状态改变就会触发该函数执行

        //判断readyState==4就可以接收服务器信息

        if(xhr.readyState==4){

            alert(xhr.responseText);

        }

    }

    //2. 打开http请求

    xhr.open('get','./03.php');

    //3. 发送请求

    xhr.send(null);

}

</script>

<body>

        <h2>返回</h2>

        <input type="button" value=" 触发" onclick="f1()" />

</body>

<?php

    echo "response";

?>

5、get方式ajax请求使用

xhr.open(‘get’,url地址);

xhr.open(‘post’,url地址);

get和post两种区别：

请求数据量
- get 2k限制
  
  -http://网址/index.php?name=zhangsan 数据量14字节 2048字节=2k
- post请求理论没有大小数据量限制，php显示是8M
数据请求形式
- get是在url地址后边通过请求字符串传递
- post请求的数据在服务器内部通过form表单以xml形式传递数据
通过get请求如何传递变量数据
通过get方式请求ajax传递“中文”有问题
- a) 在url地址里边传递中文有问题
- b) urldecode()解码 urlencode()编码
- c) 经过以上urlencode编码的汉字在url地址栏里边可以正常使用
- d) encodeURIComponent(); javascript对中文编码，url地址传递

    <script>

        function f1(){

            var xhr = createXHR();

            xhr.onreadystatechange = function(){

                if(xhr.readyState==4){

                    alert(xhr.responseText);

                }

            }

            //通过dom方式获得input的value值

            var username = document.getElementById('username').value;

            username = encodeURIComponent(username);

            xhr.open("get","./04.php?username="+username);

            xhr.send(null);

        }

        </script>

        <style type="text/css">

        </style>

    </head>

    <body>

        <h2>get请求</h2>

        用户名：<input type="text" id="username" name="username" /><br />

        <input type="button" value="get请求" onclick="f1()">

    </body>

<?php

    //连接数据库

    echo "abcd";

    //接收客户端过来的get变量信息

    echo $_GET['username'];

?>

get方式ajax请求两点注意：

给服务器传递的数据表现形式url?名称=值&名称=值
传递中文信息需要进行编码encodeURIComponent()

6、post方式ajax请求

参数如何传递
参数需要设置header头信息
是否可以传递get变量信息

a) 可以的，但是使用需要通过$_GET接收信息

b) 传递中文任然需要编码
传递中文信息

a) 各种浏览器都可以通过post方式传递中文，无需编码
具体使用：

    <script>

        function f1(){

            var xhr = createXHR();

            xhr.onreadystatechange = function(){

                if(xhr.readyState==4){

                    alert(xhr.responseText);

                }

            }

            //制作一个请求字符串

            var str = "name=tom&age=24&addr=北京";

            var h = encodeURIComponent('篮球');

            xhr.open("post","./05.php?info=milk&hobby="+h);

            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

            xhr.send(str);

        }

      </script>

    <body>

        <h2>post请求</h2>

        <input type="button" value="post请求" onclick="f1()">

    </body>

form表单给服务器传递数据是通过XML格式把数据传递到服务器, 现在需要把ajax给服务器传递的数据模仿成form表单的xml数据

setRequestHeader 该方法在open()方法之后调用

7 、get请求和post请求

get请求
- a) 给服务器传递信息在url地址后边显示
- b) 传递中文需要编码
post请求
- a) 给服务器传递的数据以请求字符串形式组织：name=value&name=value&name=value
- b) 请求字符串信息是send(服务器数据)方法参数
- c) 给服务器传递数据需要把数据转换为form表单XML格式数据setRequestHeader();
- d) 同时可以传递get变量信息
- e) 中文信息各种浏览器都会显示使用

8、同步和异步请求ajax区别

同步：同一时间程序的主进程只有一个

异步：同一时间程序的进程可有若干个

浏览器向服务器发起请求，每次需要刷新浏览器重新获取网页内容

现在我们可以通过ajax向服务器发起请求，可以利用多个ajax对象向服务器发起请求

xhr.abort() 停止ajax执行

ajax请求以“异步”动作为主

9、ajax应用效果

163网址注册，用户名校验
ajax无刷新分页效果

3、百度搜索引擎ajax应用

dom获得“中关村”3个字

ajax把参数带着，走向服务器

数据库的服务器，select * from table where name like “中关村%”

输出查询的到内容 echo

ajax接收服务器返回信息

    - 把页面上div给显示出来

    - 利用dom技术把接收到的信息显示到div页面上