Ajax基础

最新推荐文章于 2024-09-21 11:29:05 发布

无纸~文

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量274

点赞数

分类专栏：前端学习文章标签： ajax 前端 html

本文链接：https://blog.csdn.net/noingw96/article/details/84863476

版权

前端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、Ajax介绍

Ajax全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），其用途在于不必重新加载页面即可与服务器交换数据，达到更新页面内容的效果。

同步与异步：

所谓同步相当于两个人在聊天，你一句我一句，有一定的顺序步骤。在浏览器里就是用户在浏览的时候，服务器端在等待，服务器端在处理数据的时候，浏览器端在等待。

异步相当于两个人在聊天和大街上的车开来开去没有关系。浏览器将所需要的请求地址交给ajax对象，ajax对象去服务器端取所需数据，ajax对象再将数据交给浏览器端。再举个例子，好比上课时老师想喝水了，不能自己去买让学生干等着，就会派个学生去买个水。

在这个过程中，起关键性作用的是ajax对象。

二、创建ajax对象

Ajax的核心其实就是javascript的XMLHttpRequest

包括IE7以上、Chrome、FireFox、opera等主流浏览器创建方法：

// 主流浏览器创建XMLHttpRequest的方法
var request=new XMLHttpRequest();
console.log(request);

低版本的IE浏览器采用下面这种方法

var request=new ActiveXObject("Microsoft.XMLHttp");

为了能够同时适应各种版本的对象创建，我们可以检查浏览器是否支持XMLHttpRequest对象，如果支持，创建XMLHttpRequest对象，如果不支持，则创建ActiveXObject对象。

var request;
if(window.XMLHttpRequest){
    request=new XMLHttpRequest();
}
else {
    request=new ActiveXObject("Microsoft.XMLHttp");
}
console.log(request);

三、建立连接与发起请求

通过XMLHttpRequest对象的open与send方法创建对服务器的HTTP请求。

open方法有三个参数。第一个参数为请求方式，取值get/post，第二个参数为URL，第三个参数为是否异步，默认为true。

request.open('get','index.php');//建立连接
request.send();//发送请求

为了检验我们是否请求成功，我们可以写个小测试，html代码如下。

<body>
<script type="text/javascript">
    window.onload=function () {
        document.getElementById('btn').onclick=function () {
            var request;
            if(window.XMLHttpRequest){
                request=new XMLHttpRequest();
            }
            else{
                request=new ActiveXObject("Microsoft.XMLHttp");
            }
            request.open('get','index.php');//建立连接
            request.send();//发送请求
        };
    }
</script>
<input type="button" value="点击" id="btn">
</body>

index.php代码如下：

<?php 
$fp=fopen('./index.txt', 'a');
$time=date('Y-m-d H:i:s'."\r\n");
fputs($fp,$time);
 ?>

右击浏览器打开审查元素，选择Network选项卡，看到有我们的test.html，我们分别点击了三次按钮，共出现了三个index.php。

接下来为了检验php是否有正常运行，可以打开index.txt进行查看，如果显示如下代表一切顺利。

四、接受返回的数据

浏览器可以接受服务器端的数据格式有字符串、XML、JSON。

在接受数据的过程中，我们需要借助到readyState属性，它共有五个状态，从0到4表示。

0：请求未初始化
1：服务器连接已经建立
2：请求已接受
3：请求已处理
4：请求已完成，且响应已就绪

每当readyState的值改变时，就会触发onreadystatechange事件。

html代码：

<body>
<script type="text/javascript">
    window.onload=function () {
        document.getElementById('btn').onclick=function () {
            var request;
            if(window.XMLHttpRequest){
                request=new XMLHttpRequest();
            }
            else{
                request=new ActiveXObject("Microsoft.XMLHttp");
            }
            request.open('get','test2.php');//建立连接
            request.onreadystatechange=function () {
                if(request.readyState==4&&request.status==200){
                    document.getElementById('text').innerHTML=request.responseText;//获取返回的字符串数据
                }
            }
            request.send();//发送请求
        };
    }
</script>
<input type="button" value="点击" id="btn">
<div id="text"></div>
</body>

php代码：

<?php 
echo "返回数据成功！";
 ?>

运行结果如下表示成功，当然这只是个简单的例子，关键在于使用readystate属性与onreadystatechange事件。

五、get请求与post请求

get请求：需要在open方法中添加参数传递。

post请求：需要在send方法中添加参数传递。

（1）get请求

使用get请求时，其实是将数据转化成字符串的形式进行传递的，例如index.html?name=tom&&age=18。由于字符串的长度是有限制的，所以get请求只能提交少量的数据。

html代码：

<body>
<script type="text/javascript">
    window.onload=function () {
        document.getElementById('btn1').onclick=function () {
            var req;
            var name=document.getElementById('username').value;
            name=encodeURIComponent(name);
            if(window.XMLHttpRequest){
                req=new XMLHttpRequest();
            }
            else {
                req=new ActiveXObject('Microsoft.XMLHttp');
            }
            req.open('get','test3.php?name='+name);
            req.onreadystatechange=function () {
                if(req.readyState==4&&req.status==200){
                    document.getElementById('text1').innerHTML=req.responseText;
                }
            }
            req.send(null)//习惯性在send中不传值时放入null
        }
    }
</script>
<div>
    <span>用户名：&nbsp;&nbsp;</span>
    <input type="text" id="username" placeholder="请输入用户名">
    <button id="btn1">提交</button>
    <div id="text1"></div>
</div>
</body>

php代码：

<?php 
$str=$_GET["name"];
echo "你的名字是".$str;
 ?>

注意：在这里相比之前多增加了一句话name=encodeURIComponent(name)，如果不对name进行编码，在Chrome浏览器中没什么问题，但是使用IE浏览器会产生显示错误。

（2）post请求

使用post请求时，不再是以字符串的形式进行传递，而需要转化为xml格式进行传递。

如果页面上是form表单，设置method属性的值为post，会自动将数据转正xml格式。

如果没有使用form表单，必须设置setRequestHeader()f方法进行格式转换。

req2.open('post','test3.php');
req2.onreadystatechange=function () {
    if(req2.readyState==4&&req2.status==200){
        document.getElementById('text1').innerHTML=req2.responseText;
    }
}
req2.setRequestHeader("Content-Type","application/x-www-form-urlencoded" );
req2.send('name='+name);

相应的php中只要将$_GET改为$_POST即可。