Ajax异步

最新推荐文章于 2024-07-29 22:50:36 发布
最新推荐文章于 2024-07-29 22:50:36 发布
阅读量81 收藏
点赞数
文章标签： php json javascript ViewUI
原文链接：http://www.cnblogs.com/liujunhang/p/10940995.html
版权

目录

Ajax应用

前言

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

  • Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。
  • Ajax 是一种用于创建快速动态网页的技术。
  • Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

介绍

在学习Ajax之前，我们先来聊一下同步和异步的问题。

什么是同步？什么是异步呢？

首先来说同步，同步相对来说更好理解一点。比如调用一个方法，这个方法没有调用完成之前，后续的代码将不能够执行。这就是同步。
那么什么是异步呢，异步调用有些类似于消息传递，一旦开始，方法调用就会立刻返回，调用者就可以继续后面的操作。需要知道的是，此时，异步方法通常会在另外一个
线程中真实的执行着。整个过程当中，并不会阻碍调用者的工作。

而Ajax主要的工作就是通过异步来帮助我们传输数据。

基本使用

下面我们通过完成一个基本的功能来看一下ajax的写法：
需求：点击按钮，弹出01.txt当中的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">点击</button>
</body>
</html>
<script>
    
window.onload = function (){


let oBtn = document.getElementById('btn');

oBtn.onclick = function() {
    var xhr =  new XMLHttpRequest();
    // 输入地址
    xhr.open('get','01.txt',true);
    // 提交
    xhr.send();
    // 等待服务器返回内容
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            alert(xhr.responseText);
        }
    };
};
};
</script>

上面的代码中，我们通过ajax技术实现了点击按钮，弹出01.txt当中内容。
整体的实现步骤如下：

  • 获取元素绑定事件
  • 实例化XMLHttpRequest()对象
  • 调用open()方法读取指定文件
  • 发送请求
  • 绑定readystatechange事件，设置事件处理函数。

下面我们就来逐一的将上面的代码进行拆解讲解。

对象兼容

我们如果想在网页当中使用ajax技术，那么首先就需要创建一个XMLHttpRequest对象。这个对象目前的兼容情况是IE6以上以及其他的主流
浏览器都支持，但是如果想要在IE6及以下使用Ajax，我们就需要做一个兼容处理。

在IE6当中，需要使用ActiveXObject这个插件，并且要传入参数"Microsoft.XMLHTTP"。

示例代码：

var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
 }else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
 }

除了使用这个if和else判断以外，还可以使用try..catch的方法来实现兼容处理。

var xhr;
try{
    xhr = new XMLHttpRequest();
}catch(e) {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

在上面代码中，如果宿主环境中不支持XMLHttpRequest对象，就会出现错误从而会被catch所捕捉到，执行catch代码块中的另外一种声明方式。

表单当中的get方法和post方法

下面我们会说到ajax的open方法，但是在说到这个方法之前，先来了解一下form表单当中的一些内容。

例如：

<form action="1.get.php" method="get" enctype="application/x-www-form-urlencoded">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

在上面的表单当中，form标签存在几个属性，

  • action 表示数据提交位置 ，默认提交到当前页面
  • method 数据提交使用的方法 默认是get
  • enctype 表单数据提交的格式 默认值 application/x-www-form-urlencoded

get方法和post方法
在form表单当中，提交数据有get和post两种方法，如果从本质上来说，二者其实差异不大，但是外在的表现还是存在一定的差异。

下面就来说一下这些差异，这些差异性是w3c给出的说法：

  • GET在浏览器回退时是无害的（因为读取缓存），而POST会再次提交请求。
  • GET产生的URL地址可以被Bookmark，而POST不可以。
  • GET请求会被浏览器主动cache，而POST不会，除非手动设置。
  • GET请求只能进行url编码，而POST支持多种编码方式。
  • GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
  • GET请求在URL中传送的参数是有长度限制的，而POST么有。
  • 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
  • GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
  • GET参数通过URL传递，POST放在Request body中。

关于get和post的区别，请关注另外一篇文章get 和 post区别介绍。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <form action="1.get.php" method="get">
        <input type="text" name="username">
        <input type="submit" value="提交">
    </form>
</body>
</html>

php代码如下:

<?php 
header("Content-type:text/html;Charset=utf-8");
// 获取用户名 
$username = $_GET['username'];
echo $username;
 ?>

在上面的案例当中，表单通过get方式向php传递了数据，在页面的地址栏位置，我们可以发现通过url地址进行提交时，
把数据名称和数据值使用=进行连接，如果是多个的话，那么会把多个数据使用&进行连接，然后把数据放到url?后面传到指定页面。

open()方法

下面我们来说一下open()方法，通过这个方法，我们可以设置发送请求的方法，地址，以及是否异步。

xhr.open(method,url,async);

例如：

xhr.open('get','01.txt',true);

当传输数据的方法为get方法的时候

我们在上面说到，传输数据的时候，如果是get方法，那么在url地址中可能存在参数，参数是以？和& 进行拼接。

例如：

var xhr = null;

if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 将参数通过?的形式进行拼接 
xhr.open('get','08.php?name=zhangsan&age=14',true);

xhr.send();


xhr.onreadystatechange = function(){

    if(xhr.readyState === 4 && xhr.status === 200){
        alert(xhr.responseText);
    } 
};

当传输数据的方法为post方法的时候

当传输数据为post方法的时候，需要传递的参数应该通过send()方法进行传递。同时需要设置一下数据传输格式。

如下：

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

例如将上面的案例转换成post方法，代码如下：


var xhr = null;

if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.open('post','08.php',true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=zhangsan&age=14");
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        alert(xhr.responseText);
    } 
};

绑定onreadystatechange事件

上面我们将数据发送到了服务器，服务器接收到后会进行一定的处理，而onreadystatechange事件监听的就是XMLHttpRequest对象的readyState的状态。
一旦状态发生改变都会触发这个事件。

xhr.onreadystatechange = function(){};

readyState和status

readyState里面存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

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

status里面存储的是http状态码，根据不同的情况，服务器会返回不同的状态码。200表示成功。

一般情况下，我们都是等readyState的值变为4，status的值为200的时候才去处理返回的数据。
例如：

xhr.onreadystatechange = function () {
    if(xhr.readyState === 4 && xhr.status === 200){
        // code ...
    }
}

获取服务器响应

当我们通过XMLHttpRequest对象向服务器发起请求之后，服务器会给予我们一定的响应，那么我们该如何获取响应呢？

可以通过XMLHttpRequest 对象的 responseText(获得字符串形式的响应数据。) 或 responseXML(获得 XML 形式的响应数据) 属性。

例如：

xhr.onreadystatechange = function () {
    if(xhr.readyState === 4 && xhr.status === 200){
        alert(xhr.responseText);
    }
}

小练习：点击按钮读取数据

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻列表</title>
</head>
<body>
    <button id="btn">点击</button>
    <ul id="list">
        
    </ul>
</body>
<script>
    window.onload = function(){

        // 获取list
        var oList = document.getElementById('list');
        var oBtn = document.getElementById('btn');

        oBtn.onclick = function(){

            var xhr = null;

            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }


            xhr.open('get','06.get.php',true);
            xhr.send();


            xhr.onreadystatechange = function() {

                if(xhr.readyState === 4 && xhr.status === 200){

                    // 拿到数据进行处理
                    console.log(xhr.responseText);
                    var news = JSON.parse(xhr.responseText);
                    console.log(news);// 数组
                    var html = '';
                    for(let i=0;i<news.length;i++){

                        // 将数据插入到li 并且存储到html
                        html += `<li><a href="">${news[i].title}</a> [<span>${news[i].date}</span>]</li>`;

                    }
                    oList.innerHTML = html;
                }
            };
        };
    };
</script>
</html>

php代码：

<?php
header("Content-type:text/html;Charset=utf-8");
$arr_news = [
    ['title'=>'美国从不愿提及的真相：中朝战俘境遇','date'=>'2019-05-27'],
    ['title'=>'县级领导网上筹款20万治病 家人及官方回应','date'=>'2019-05-26'],
    ['title'=>'杜特尔特“拷问”女副总统为啥不笑 13分钟后见效','date'=>'2019-05-25'],
    ['title'=>'翟天临又上热搜了 是被半夜改论文毕业生骂上去的','date'=>'2019-05-24'],
    ['title'=>'美国百岁老人被房东驱逐 惊动了“硬汉”施瓦辛格','date'=>'2019-05-23'],
    ['title'=>'实习女律师当街遇害 知情者：行凶男子想杀漂亮女孩','date'=>'2019-05-22'],
    ['title'=>'国内成品油价格迎来年内第八涨 加满一箱油多花2元','date'=>'2019-05-21'],
    ['title'=>'中安民生“以房养老”骗局：老人被逼卖房还高利贷','date'=>'2019-05-20'],
    ['title'=>'任正非：华为必须做世界第一 若第二可能活不下来','date'=>'2019-05-19'],
    ['title'=>'91岁李兆基退休：香港富豪“四大天王”时代落幕','date'=>'2019-05-18']
];

echo json_encode($arr_news);

上面的代码中，我们点击按钮就可以在页面中显示php给我们返回的数据。

ajax函数封装

为了便于操作，我们也可以将ajax常用的操作进行封装。

function ajax(method, url, data, success) {
    var xhr = null;
    try {
        xhr = new XMLHttpRequest();
    } catch (e) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    
    if (method == 'get' && data) {
        url += '?' + data;
    }
    
    xhr.open(method,url,true);
    if (method == 'get') {
        xhr.send();
    } else {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }
    
    xhr.onreadystatechange = function() {
        
        if ( xhr.readyState == 4 ) {
            if ( xhr.status == 200 ) {
                success && success(xhr.responseText);
            } else {
                alert('出错了,Err：' + xhr.status);
            }
        }
        
    }
}

有了这个函数，上面的小练习就可以写成下面的样式：

ajax('get','06.get.php','',function(data) {
    var data = JSON.parse( data );
        
    var oUl = document.getElementById('ul1');
    var html = '';
    for (var i=0; i<data.length; i++) {
        html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
    }
    oUl.innerHTML = html;
});

我们也可以通过轮询的形式让前端新闻自动请求后端的数据：

setInterval(function() {
    ajax('get','getNews.php','',function(data) {
        var data = JSON.parse( data );
            
        var oUl = document.getElementById('ul1');
        var html = '';
        for (var i=0; i<data.length; i++) {
            html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
        }
        oUl.innerHTML = html;
    });
}, 3000);

小练习

下面通过ajax + 多列布局来实现瀑布流效果：

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        body{
            background:#352323 url(images/a.png);
        }
        img{
            display:block;
        }
        section{
            max-width:95%;
            margin:0 auto;
            overflow:hidden;
            column-count: 5;    
            column-gap:0;
            column-fill: auto;
        }
        figure{
            border:2px solid pink;
            margin:0 5px 10px;
            break-inside: avoid;    
            padding:5px;
        }
        figure img{
            width:100%;
        }
        figcaption{
            padding:10px 0;
            text-align:center;
            font-weight:900;
            color:#a77869;
        }
    </style>
</head>
<body>
    <section>
        <!-- <figure>
            <img src="images/1.jpg" alt="">
            <figcaption>往后余生，风雪是你</figcaption>
        </figure> -->
    </section>
</body>
<script src="ajax.js"></script>
<script>
    let section = document.getElementsByTagName('section')[0];
    ajax('get','img.php','num=100',function(data){
        let img_data = JSON.parse(data);
        console.log(img_data)
        for(let i=0;i<img_data.length;i++){
            
            // 创建figure标签
            let figure = document.createElement('figure');

            // 创建里面的两个子元素
            let img = document.createElement('img');
            img.src = img_data[i];

            let figcaption = document.createElement('figcaption');

            figcaption.innerHTML = "往后余生，风雪是你";

            figure.appendChild(img);
            figure.appendChild(figcaption);
            section.appendChild(figure)
        }
    })
</script>
</html>

php代码如下：

<?php
header("Content-type:text/html;Charset=utf-8");


$num = $_GET['num'];// 通过get方式传递数据  
$img = file("img.txt"); // 读取文件地址

$arr_url = array();
for($i=0;$i<$num;$i++){
    $url = array_rand($img);
    array_push($arr_url,$img[$url]);
}

// 返回json数据 
$a = json_encode($arr_url,JSON_UNESCAPED_SLASHES|JSON_UNESCAPED_UNICODE);
echo $a;

在上面的代码中，我们只需要每次在请求的时候设置好num参数即可以得到图片。

转载于:https://www.cnblogs.com/liujunhang/p/10940995.html

aevmb80648
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AJAX异步
weixin_49756484的博客
05-27 823
Ajax异步 这篇主要讲Ajax与XMLHttpRequest对象。 在开始讲新的知识点的之前，需要重新添加一个项目，我们把之前那个form表单提交的数据拷贝到我新建的项目当中（见图表1）我们需要用到这个表单 图表 1 当时我们讲过一个json，怎么才是一个json的字符串呢？ 则是通过{“键”：“值”}（见图表2）， 图表 2 这就是一个字符串，然后我们在通过一个变量去接收它，它就变成了一个js对象（见图表3） 图表 3 注意：json是js对象的一个子集。 Js对象里面
JQuery Ajax异步
weixin_50164157的博客
10-28 889
什么是 AJAX？ AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。 简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。 关于 jQuery 与 AJAX jQuery 提供多个与 AJAX 有关的方法。 通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
Ajax异步调用
weixin_44879063的博客
04-02 541
1、Ajax异步调用概念： 浏览器把请求交给代理对象—XMLHttpRequest（绝大多数浏览器都内置了这个对象），由代理对象向服务器发起请求，接收、解析服务器响应的数据，并把数据更新到浏览器指定的控件上。从而实现了页面数据的局部刷新。异步请求使浏览器不用等待服务器处理请求，不用重新加载整个页面来展示服务器响应的数据，在异步请求发送的过程中浏览器还能进行其它的操作。 2、浅谈XMLhttprequest对象是什么？ Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Intern
ajax异步加载
weixin_66109724的博客
01-12 369
1
AJAX异步请求
HHHHHAOGG的博客
01-04 3711
1.什么是AJAX的异步请求： 我们知道，在同步请求模型中，浏览器是直接向服务器发送请求，并直接接收、处理服务器响应的数据的。这就导致了浏览器发送完一个请求后，就只能干等着服务器那边处理请求，响应请求，在这期间其它事情都做不了。但是异步请求就可以省略浏览器不会出现干等着的状态 2.异步请求的原理： 异步请求正是基于以上所述的模式，浏览器把请求交给代理对象—XMLHttpRequest（绝大多数浏览器都内置了这个对象），由代理对象向服务器发起请求，接收、解析服务器响应的数据，并把数据更新到浏览器指定的控
Ajax 异步交互
Jine
09-07 2703
基本概述 同步交互 类似于排队 就是指发送一个请求，需要等待返回，然后才能够发送下一个请求 异步交互 异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待。 所谓异步交互，就是指发送一个请求，不需要等待返回，随时可以再发送下一个请求。 同步交互与异步交互区别在于：同步需要等待结果，而异步不需要等待结果 异步交互的优势 异步交互相比同步交互的优势主要具有以下几点: 1、用户操作无须像同步交互必须等待结果。 2、异步交互对带宽造成的压力相比同步交互更小。 3、异步交互只需与服务器端交换.
Ajax异步提交表单
weixin_44543135的博客
03-31 1576
Ajax异步提交表单 开发工具与关键技术：VS2015, HTML5, JavaScript 作者：张金荣 撰写时间：2019 年 3月 28 日 先简单介绍一下Ajax异步提交： 异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。所谓异步加载页面就是不用在刷新整个页面的前提下异步加载部分网页更新 这是一个异步提...
Ajax异步请求
m0_48844699的博客
10-31 3946
Ajax是一个异步请求,可以不用刷新整个页面，就可以达到局部更新的效果。百度的搜索也用到了ajax这个技术，当我们每次输入一个关键字的时候，搜索栏下面也会跟着改变，但是这个改变并不会刷新整个页面。想必大家也很好奇什么是异步请求，什么是同步请求，那么接下来就有我来进行揭秘吧。
Ajax异步测试
风泊月
03-13 1558
使用Ajax完成异步请求，对其使用有一个简单的认识1.完成两个基本的小功能，效果如下2.组成非常简单Servlet+jspjsp如下&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt; &lt;% String path = request.getContextPath(); String basePa...
ajax异步数据加载
weixin_52136304的博客
03-20 3116
8分钟让初学者明白ajax异步数据加载
Ajax 异步加载解析
10-21
要实现Ajax异步加载，需要遵循以下步骤： 1. **创建Ajax对象**：由于不同的浏览器对Ajax支持的实现存在差异，因此通常需要创建一个XMLHttpRequest对象。在JavaScript中，这是通过`new XMLHttpRequest()`完成的。...
Ajax异步提交表单数据的说明及方法实例
09-05
对于一个典型的AJAX异步提交表单的示例，如登录页面的登录操作，我们可以看到以下步骤： 1. 用户填写表单并点击登录按钮。 2. 使用jQuery库监听登录按钮的点击事件。 3. 当按钮被点击时，阻止默认的表单提交行为，...
ajax异步上传_ajax异步上传_
10-03
在本案例中，我们将深入探讨如何在JSP页面上实现Ajax异步上传，并通过Java后端处理这些上传请求。 首先，我们需要理解Ajax的基本工作原理。Ajax的核心是XMLHttpRequest对象，它允许JavaScript向服务器发送HTTP请求...
JavaWeb ajax异步自动填充信息
06-05
本示例“JavaWeb ajax异步自动填充信息”是一个典型的Ajax应用，模拟了搜索引擎如百度在用户输入时自动填充建议的功能。 首先，我们需要理解Ajax的工作原理。Ajax的核心是XMLHttpRequest对象，它允许JavaScript在...
这款ERP云进销存系统，直接封神
魔法标记
07-29 434
一套用php写的ERP云进销存系统，快速部署，直接使用，简直是小公司和个体户的神器。
WordPress原创插件：搜索引擎抓取首图seo图片
最新发布
爱酷码的博客
07-29 246
WordPress原创插件：搜索引擎抓取首图seo图片。
PHP框架详解 - symfony框架
丁爸的博客
07-28 780
Symphony框架是一个功能强大、稳定可靠、易于扩展和定制的开源Web框架，适用于构建各种类型的Web应用程序。虽然在某些情况下可能会遇到一些性能和学习曲线的挑战，但是通过合理的配置和优化，以及积极的学习和实践，可以充分发挥Symphony框架的优势，构建高质量的Web应用程序。Symphony框架是一个基于PHP的开源Web框架，它提供了一套丰富的组件和工具，可以帮助开发者更轻松地构建高质量的Web应用程序。
跨境电商独立站：Shopify/Wordpress/店匠选哪个？
dongdonglin77的博客
07-26 923
商家需要根据自己的资源、能力和市场定位，选择最适合自己的建站工具，并制定有效的运营计划。通过持续的市场调研、品牌建设、流量获取和客户服务，商家可以在独立站的道路上实现可持续发展。
Ajax异步交互技术详解
"这篇笔记主要介绍了AJAX异步交互技术，包括其定义、与同步交互的区别，以及实现异步交互的核心对象XMLHttpRequest的使用方法。" 在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种能够让网页在不刷新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值