ajax技术基础详解

时间：2023-03-09 02:15:39
ajax技术基础详解

一、概述

1、什么是ajax

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

2、什么时候出现ajax？

—- XMLHttp 微软

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

什么时候流行使用

2005年

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

javascript从此也被人们重视起来

什么地方可以使用ajax

3、应用场景

百度搜索效果

ajax无刷新分页

用户名是否被占用的校验

实现网页局部信息的刷新

具体应用：

163用户注册

传统的表单验证：

ajax技术基础详解

ajax表单验证

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) 成员属性

ajax技术基础详解

(2)成员方法

ajax技术基础详解

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

ajax技术基础详解

<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两种区别：

  1. 请求数据量

    • get 2k限制

      -http://网址/index.php?name=zhangsan 数据量14字节 2048字节=2k
    • post请求 理论没有大小数据量限制，php显示是8M

  2. 数据请求形式

    • get是在url地址后边通过请求字符串传递
    • post请求的数据在服务器内部通过form表单以xml形式传递数据

  3. 通过get请求如何传递变量数据

  4. 通过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请求两点注意：

  1. 给服务器传递的数据表现形式url?名称=值&名称=值

  2. 传递中文信息需要进行编码encodeURIComponent()

6、post方式ajax请求

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

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

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

  4. 传递中文信息

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

  5. 具体使用：

    <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请求

  1. get请求

    • a) 给服务器传递信息在url地址后边显示
    • b) 传递中文需要编码

  2. post请求

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

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

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

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

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

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

ajax技术基础详解

xhr.abort() 停止ajax执行

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

9、ajax应用效果

  1. 163网址注册，用户名校验

  2. ajax无刷新分页效果

ajax技术基础详解

3、百度搜索引擎ajax应用

ajax技术基础详解

dom获得“中关村”3个字

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

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

输出查询的到内容 echo

ajax接收服务器返回信息

    - 把页面上div给显示出来

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

版权声明：本文为小平果原创文章，转载请注明：http://blog.****.net/i10630226

相关文章