【3分钟带你学】Ajax

最新推荐文章于 2024-07-13 23:25:03 发布

_Martini_

最新推荐文章于 2024-07-13 23:25:03 发布

阅读量202

点赞数

分类专栏： JavaScript Ajax 文章标签： ajax 异步 javascript

本文链接：https://blog.csdn.net/qqqwed123456/article/details/78546556

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Ajax

1 篇文章 0 订阅

订阅专栏

Asynchronous JavaScript And XML

什么是Ajax?

• Asynchronous ：异步

• JavaScript ：JS语言

• And ：和

• XML ：万能的数据传输格式

Ajax ：异步的JavaScript与XML，这就是Ajax介绍。

本质是客户端通过HTTP请求向服务器发送请求

无刷新，让JS发送HTTP请求

一、Ajax对象

1.1 获取对象

基于W3C标准的浏览器

var xhr = new XMLHttpRequest();

IE浏览器方式(IE8开始向W3C标准靠拢)

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

将兼容代码封装进函数调用

<script>
//封装进函数供其他程序调用
function cXHR(){
    try{return new XMLHttpRequest()}catch(e){};
    try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){};
}
</script>

1.2属性

readyState 获取Ajax状态码

0：表示对象已建立，但未初始化，只是 new 成功获取了对象，但是未调用open方法
1：表示对象已初始化，但未发送，调用了open方法，但是未调用send方法
2：已调用send方法进行请求
3：正在接收数据（接收到一部分），客户端已经接收到了一部分返回的数据
4：接收完成，客户端已经接收到了所有数据

status http响应状态码

HTTP状态码:

1: 消息

2: 成功

3: 重定向

4: 请求错误(文件不存在,没有权限)

5: 服务器内部错误

responseText： 如果服务器端返回字符串，使用responseText进行接收

responseXML：如果服务器端返回XML数据，使用responseXML进行接收

onreadystatechange：当 readyState 状态码发生改变时所触发的回调函数

1.3方法

open(method,url,async) 初始化Ajax对象

method请求方式： get/post

url请求的服务器地址

async true代表异步请求，false 代表同步请求,默认异步

setRequestHeader(header,value) 设置请求头信息

header请求头名称

value 请求头的值

send(content) 发送Ajax请求

content 如果get请求，此参数为null；如果post请求。此参数就是要传递的数据

1.4同步与异步

同步：只能做一件事情

异步：同时可以做多件事情

二、发送GET请求

1、记口诀（五步走）

第一步：创建Ajax对象 var xhr = createXhr();

第二步：设置回调函数 xhr.onreadystatechange = function() {}

第三步：初始化Ajax对象 xhr.open(‘get’,url);

第四步：发送Ajax请求 xhr.send(null);

第五步：判断与执行回调函数内部判断if(xhr.readyState == 4) {}

返回结果：字符串，使用xhr.responseText

XML数据，使用xhr.responseXML

下面是注册页面检测是否重名的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" id="inp">
    <span id='tip'></span><br>
    <input type="button" value="注册">
</body>
  <script>
    //封装进函数供其他程序调用
    function cXHR(){
        try{return new XMLHttpRequest()}catch(e){};
        try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){};
    }
</script>
<script type="text/javascript">
    var inp = document.getElementById('inp');
    var name = inp.value;
    inp.onblur = function(){
        var name = this.value;
      // 1创建Ajax对象
        var xhr = cXHR();
      //2.设置回调函数
        xhr.onreadystatechange = function(){
          //5.判断与执行
            if(xhr.readyState == 4){
                if(xhr.responseText == 1){
                    var t = "<font color='red'>用户名已经被注册</font>";
                }else{
                    var t = "<font color='green'>恭喜用户名可用</font>";
                }
                document.getElementById('tip').innerHTML = t;
            }
        }
        //3初始化Ajax
        xhr.open('get','1.1.php?name='+name);
        //4发送Ajax请求
        xhr.send();
    }   
</script>
</html>

PHP后台代码：

<?php
header('content-type:text/html;charset=utf-8');
$name = $_GET['name'];
mysql_connect('localhost','root','root');
mysql_query('use itcast');
mysql_query('set names utf8');

$sql = "SELECT id FROM student WHERE name='$name'";
$r = mysql_query($sql);
$res = mysql_fetch_assoc($r);

if($res){
    echo 1;
}else{
    echo 0;
}

三、IE缓存问题

当使用IE浏览器时，相同一个URL发送多次请求时，浏览器会将页面内容缓存起来，会产生缓存问题；

缓存设计的初衷是以前网速较慢为了加快网站的响应速度。

解决方案：

URL重写
使用随机数产生不同的URL地址
xhr.open('get','user.php?username='+username+'&_='+Math.random());

使用时间戳解决缓存问题

xhr.open('get','user.php?username='+username+'&_='+new Date().getTime());
设置响应头禁用客户端缓存
```
header('Cache-Control:no-cache');
```
设置请求头的缓存时间
```
xhr.setRequestHeader('If-Modified_Since','0');
```
四、Ajax发送POST请求

Ajax中get和post的区别

1.传参方式不同：

GET在地址尾部使用？拼接多个参数
POST使用**send()**方法传递参数, 在请求空白行的位置传递参数的

 2.请求头
POST必须设置请求头

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

GET不用设置

3. 参数类型
 GET只能传输简单类型：数字、字符串
 POST除了数字和字符串外，还可以传输二进制数据

POST请求

1、记口诀（六步走）

第一步：创建Ajax对象 var xhr = createXhr();

第二步：设置回调函数 xhr.onreadystatechange = function() {}

第三步：初始化Ajax对象 xhr.open(‘post’,url);

第四步:xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

第五步：发送Ajax请求 xhr.send(data);

第六步：判断与执行回调函数内部判断if(xhr.readyState == 4) {}

将上面案例代码,改变一下就可以了

//请求地址 var url = '03-1.php'; //open参数为post xhr.open('post',url); //设置请求头 xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //设置post请求参数值 xhr.send('names='+inp.value);

Ajax 实现无刷新上传文件

文件上传原理 ，浏览器客户端将文件载入并解析为二进制数据，
然后通过HTTP协议将数据发送到服务器端，文件上传就已经成功了；
但是对于服务器来说，接收到的文件会放到系统缓存中，
我们需要使用PHP的move_uploaded_file函数将文件移至我们设置好的目录下，并对缓存文件重新命名；
完成移动操作后，我们就可以在服务器端看见上传后的文件了；
想要使用Ajax完成文件上传，首先我们要学会， Ajax作为客户端如何将文件读入并解析为二进制数据；
HTML5为我们提供了 FormData 对象：
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。
如果你把表单的编码类型设置为multipart/form-data，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同;

FormData 手册
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

<script>
    // 原生上传
    var form_element = document.querySelector('form');
    document.querySelector('#btn').onclick = function(){
        // 获取所有表单数据
        var data = new FormData(form_element);
        // ajax上传
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                if(xhr.responseText == 1){
                    alert('上传成功');
                }else{
                    alert('上传失败');
                }
            }
        }
        xhr.open('post','upload.php');
        xhr.send(data);

    }
</script>

_Martini_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【3分钟带你学】Ajax

Asynchronous JavaScript And XML 什么是Ajax? • Asynchronous ：异步 • JavaScript ：JS语言 • And ：和 • XML ：万能的数据传输格式 Ajax ：异步的JavaScript与XML，这就是Ajax介绍。本质是客户端通过HTTP请求向服务器发送请求无刷新，让JS发送HTTP
复制链接

扫一扫