[JS]笔记17_AJAX1基本过程（多种适用情况）

最新推荐文章于 2022-01-17 15:22:21 发布
最新推荐文章于 2022-01-17 15:22:21 发布
阅读量585 收藏
点赞数
分类专栏： javascript 文章标签： ajax javascript 服务器 数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/express_yourself/article/details/53065123
版权

注：所有ajax请求必须在服务器环境下运行

1、请求服务器端的txt格式的数据

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax1-txt</title>
</head>
<body>
<button id="btn">请求数据</button>
<h1 id="txt"></h1>
<script>
    var txt=document.getElementById('txt');
    var btn=document.getElementById('btn');
    btn.onclick=function(){
        //1、创建XMLHttpRequest对象
        var xhr=null;//对象类型
        if (window.XMLHttpRequest) {//非IE5 6
            xhr=new XMLHttpRequest();//实例对象
        }else{//IE5 6
            xhr=new ActiveXObject('Microsoft.XMLHTTP');
        }
        //2、打开与服务器的链接
        xhr.open('get','test01.txt',true)//常用异步--true
        //3、发送给服务器
        xhr.send(null);//空或null--get请求
        //4、响应就绪
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4) {//请求完成
                alert('4');
                if (xhr.status==200) {//OK-->表示响应已就绪
                    alert('400');
                    txt.innerHTML=xhr.responseText;
                }else{
                    alert(xhr.status);
                };
            };
        };
    }
</script>
</body>
</html>
<!-- 1、请求服务器端的txt格式的数据 -->

txt格式的数据：

louloloolooooo

2、请求服务器端的json对象

json是以文本即字符串的形式传递的，而JS操作的是JSON对象
JSON字符串->json对象

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax2-json对象</title>
</head>
<body>
<button id="btn">请求数据</button>
<h1 id="list"></h1>
<script>
    var list=document.getElementById('list');
    var btn=document.getElementById('btn');
    btn.onclick=function(){
        //1、创建XMLHttpRequest对象
        if (window.XMLHttpRequest) {//非IE5 6
            var xhr=new XMLHttpRequest();//实例对象
        }else{//IE5 6
            var xhr=new ActiveXObject('Microsoft.XMLHTTP');
        }
        //2、打开与服务器的链接
        xhr.open('get','test02.json?_='+new Date().getTime(),true)//常用异步--true
        //?后跟发送给服务器的数据--->生成不一样的url-->解决缓存问题

        //3、发送给服务器
        xhr.send(null);//空或null--get请求
        //4、响应就绪
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4) {//请求完成
                if (xhr.status==200) {//OK-->表示响应已就绪
                    var json=JSON.parse(xhr.responseText);//解析成json对象
                    for (var i = 0; i < json.name.length; i++) {
                        list.innerHTML+='<li>姓名:'+json.name[i]+',  性别：'+json.sex[i]+', 年龄：'+json.age[i]+'  ,成绩：'+json.scroe[i]+'</li>';
                    }
                }else{
                    alert(xhr.status);
                };
            };
        };
    }
</script>
</body>
</html>

json对象格式的数据：

{
    "name":["小喽","安静","老二","佳佳"],
    "sex":["女","女","男","男"],
    "age":[19,23,34,21],
    "scroe":[100,77,33,90]
}

这里写图片描述

3、请求服务器端的json数组

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax3-json数组</title>
</head>
<body>
<button id="btn">请求数据</button>
<h1 id="list"></h1>
<script>
    var list=document.getElementById('list');
    var btn=document.getElementById('btn');
    btn.onclick=function(){
        //1、创建XMLHttpRequest对象
        if (window.XMLHttpRequest) {//非IE5 6
            var xhr=new XMLHttpRequest();//实例对象
        }else{//IE5 6
            var xhr=new ActiveXObject('Microsoft.XMLHTTP');
        }
        //2、打开与服务器的链接
        xhr.open('get','test03.json?_='+new Date().getTime(),true)//常用异步--true
        //3、发送给服务器
        xhr.send(null);//空或null--get请求
        //4、响应就绪
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4) {//请求完成
                if (xhr.status==200) {//OK-->表示响应已就绪
                    var json=JSON.parse(xhr.responseText);//解析成json对象
                    for (var i = 0; i < json.length; i++) {
                        list.innerHTML+='<li>姓名:'+json[i].name+',  性别：'+json[i].sex+', 年龄：'+json[i].age+'  ,成绩：'+json[i].scroe+'</li>';
                    }
                }else{
                    alert(xhr.status);
                };
            };
        };
    }
</script>
</body>
</html>

json数组格式的数据：

[
    {"name":"小喽","sex":"女","age":"19","scroe":"99"},
    {"name":"老二","sex":"男","age":"23","scroe":"77"},
    {"name":"安静","sex":"女","age":"24","scroe":"90"},
    {"name":"佳佳","sex":"男","age":"20","scroe":"45"}
]

4、请求服务器端的XML格式

获取标签元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax4-XML</title>
</head>
<body>
<button id="btn">请求数据</button>
<ul id="list"></ul>
<script>
    var list=document.getElementById('list');
    var btn=document.getElementById('btn');
    btn.onclick=function(){
        //1、创建XMLHttpRequest对象
        if (window.XMLHttpRequest) {//非IE5 6
            var xhr=new XMLHttpRequest();//实例对象
        }else{//IE5 6
            var xhr=new ActiveXObject('Microsoft.XMLHTTP');
        }
        //2、打开与服务器的链接
        xhr.open('get','test04.xml?_='+new Date().getTime(),true)//常用异步--true
        //3、发送给服务器
        xhr.send(null);//空或null--get请求
        //4、响应就绪
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4) {//请求完成
                if (xhr.status==200) {//OK-->表示响应已就绪
                    var xmlDoc=xhr.responseXML;//responseXML 获得 XML 形式的响应数据
                    var names=xmlDoc.getElementsByTagName('name');
                    var sexs=xmlDoc.getElementsByTagName('sex');
                    var ages=xmlDoc.getElementsByTagName('age');
                    var score=xmlDoc.getElementsByTagName('score');
                    console.log(names);
                    for (var i = 0; i < names.length; i++) {
                        list.innerHTML+='<li>姓名:'+names[i].innerHTML+'， 性别:'+sexs[i].innerHTML+'， 年龄:'+ages[i].innerHTML+'， 成绩:'+score[i].innerHTML+'</li>';
                    }
                }else{
                    alert(xhr.status);
                };
            };
        };
    }
</script>
</body>
</html>

XML格式的数据：

<persons>
    <person>
        <name>老王</name>
        <sex>女</sex>
        <age>19</age>
        <score>66</score>
    </person>
    <person>
        <name>老刘</name>
        <sex>男</sex>
        <age>23</age>
        <score>75</score>
    </person>
    <person>
        <name>老李</name>
        <sex>女</sex>
        <age>24</age>
        <score>88</score>
    </person>
    <person>
        <name>老张</name>
        <sex>男</sex>
        <age>31</age>
        <score>94</score>
    </person>
</persons>

这里写图片描述

5、请求服务器端PHP格式数据

返回字符串->需要解析
HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax5-PHP</title>
</head>
<body>
<button id="btn">请求数据</button>
<h1 id="list"></h1>
<script>
    var list=document.getElementById('list');
    var btn=document.getElementById('btn');
    btn.onclick=function(){
        //1、创建XMLHttpRequest对象
        if (window.XMLHttpRequest) {//非IE5 6
            var xhr=new XMLHttpRequest();//实例对象
        }else{//IE5 6
            var xhr=new ActiveXObject('Microsoft.XMLHTTP');
        }
        //2、打开与服务器的链接
        xhr.open('get','test05.php?_='+new Date().getTime(),true)//常用异步--true
        //3、发送给服务器
        xhr.send(null);//空或null--get请求
        //4、响应就绪
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4) {//请求完成
                if (xhr.status==200) {//OK-->表示响应已就绪
                    var json=JSON.parse(xhr.responseText);//解析成json对象
                    list.innerHTML=json.name;
                }else{
                    alert(xhr.status);
                };
            };
        };
    }
</script>
</body>
</html>

XML格式的数据：

<?php
    $str='{"name":"小喽","sex":"女","age":19,"score":66}';
    echo $str;
?>

6、请求服务器端PHP格式数据

返回字符串->不需要解析
HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax5-PHP2</title>
</head>
<body>
<input type="text" name="" value="" id="ipt">
<button id="btn">请求数据</button>
<h1 id="txt"></h1>
<script>
    var txt=document.getElementById('txt');
    var btn=document.getElementById('btn');
    var ipt=document.getElementById('ipt');
    btn.onclick=function(){
        //1、创建XMLHttpRequest对象
        if (window.XMLHttpRequest) {//非IE5 6
            var xhr=new XMLHttpRequest();//实例对象
        }else{//IE5 6
            var xhr=new ActiveXObject('Microsoft.XMLHTTP');
        }
        //2、打开与服务器的链接
        xhr.open('get','test06.php?age='+ipt.value+'&_='+new Date().getTime(),true)//常用异步--true
        //3、发送给服务器
        xhr.send(null);//空或null--get请求
        //4、响应就绪
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4) {//请求完成
                if (xhr.status==200) {//OK-->表示响应已就绪
                    txt.innerHTML=xhr.responseText;
                }else{
                    alert(xhr.status);
                };
            };
        };
    }
</script>
</body>
</html>

XML格式的数据：

<?php
    $str=$_GET['age'];
    switch($str){
        case '21':
            echo '小喽';
            break;
        case '22':
            echo '小雪';
            break;
        case '23':
            echo '佳佳';
            break;
        case '24':
            echo '迪迪';
            break;
        default: 
            echo "小妖精";
            break;
    }
?>

这里写图片描述

loushumei
关注
专栏目录
ajax（1）---ajax概述
猿累人生
12-12 459
1、什么是ajax? asynchronous Javascript and XML，即异步的JavaScript和XML ajax是一种页面无刷新的技术，也称之为局部刷新技术 2、ajax的优点和缺点？ 优点：1）、在不重新加载整个页面的情况下,就可以与服务器交换数据并更新网页的内容    2）、将一些后端工作转移到前端，减轻服务器的压力   3）、支持异步通信，即无需等待请
ajax1
chicou7991的博客
04-13 100
asynchronous javascript and xml 建立连接 request.open(method，url，async，username，password) method：get，post，put。。。。基本只用get，post url：请求地址 async：默认tru...
ajax(1)
qjoycn
01-01 118
我的截图如下: 1.首先要在项目中增加对ajax.dll的引用. 2.AjaxMethod.cs AjaxMethod.cs&lt;!--&lt;br /&gt;&lt;br /&gt;Code highlighting produced by Actipro CodeHighlighter (freeware)&lt;br /&gt;http://www.CodeHighlighter.co...
Ajax(1)
到得还来别无事，庐山烟雨浙江潮。
02-13 209
AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术） Ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。 Ajax不属于JS核心语法（ECMA Scrip...
jQuery学习笔记之 Ajax操作篇（二） - 数据传递
10-25
在讨论Web开发中前端与后端数据交互的方式时，Ajax是其中非常重要的技术之一，它允许页面在不进行全页面刷新的情况下与服务器进行数据交换。本篇学习笔记主要探讨了jQuery Ajax操作中的数据传递，包括GET和POST请求...
AryaNotes:一个笔记制作应用程序，有助于制作重要或不重要的笔记，适用于 HTML、CSS 和 JAVASCRIPT
05-29
在AryaNotes中，你可以创建JavaScript笔记，学习变量、数据类型、函数、对象、数组、事件处理等基础知识，以及DOM操作、Ajax异步通信和现代框架如React、Vue或Angular的应用。比如，你可以记录如何使用`...
JavaScript_一个现代的电子书管理器和阅读器，具有同步和备份能力，适用于Windows macOS Linux和Web
05-20
利用AJAX（Asynchronous JavaScript and XML）技术，可以实现实时更新，无需刷新页面。 2. **文件处理**：项目可能使用JavaScript库，如FileReader API，来读取、解析和展示电子书内容，支持多种格式如EPUB、PDF或...
Web开发基础学习笔记整理（1）
01-08
JavaScript 则是实现网页动态功能的关键，它可以处理用户交互、操作DOM（文档对象模型）、执行异步通信（Ajax）等。比如，用JavaScript来改变HTML元素的文本： ```javascript document.getElementById("myElement")...
JavaScript从入门到精通学习笔记
最新发布
07-19
### JavaScript从入门到精通学习笔记 #### 一、JavaScript简介 **1.1 JavaScript是什么** JavaScript 是一种轻量级的编程语言，主要被用于客户端（浏览器端）的脚本语言，能够实现动态网页效果，增强用户体验。...
AJAX 1 入门
武林半侠的博客
05-22 362
AJAX 1 初识 前端AJAX只写： 点击某处运行函数loadXMLDoc()， 函数包括发送请求，接收响应。每个请求对应的服务器端地址url相同或不同。 至于响应是什么样的，是后端服务器的事。   1.AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新
ajax1总结
m0_65180033的博客
01-17 241
### 1.数据交换 ```js 1.数据交换格式：服务器端与客户端之间进行数据传输与交换的格式。 2.JOSN：JSON 的英文全称是 JavaScript Object Notation，即JavaScript对象表示法。简单来讲，JSON的本质是字符串。 3.JOSN作用：JSON是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。 4.数据转换 序列化： 把数据对象转换为字符串 JOSN.strin...
ajax 一个完整的ajax请求
热门推荐
fortunegrant的博客
03-12 19万+
var request;if(window.XMLHttpRequest){ request=new XMLHttpRequest(); //IE7+,...}else{ request=new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5用XHR发送请求：open(method,url,async) 调用XHR对象，async表示同步还是异步，默...
AJAX请求数据_demo
louShuMei 的博客
11-12 1万+
本篇列举三个demo: 1、用ajax请求json格式数据(javascript) 2、用ajax请求json格式数据(Jquery) 3、用jsonp请求json格式数据(Jquery) 页面只有实现两个功能（用get请求-获取数据 & 用post请求-设置修改数据）三个demo页面布局如下： <h1>员工查询</h1><label>请输入员工编号：</label> <input typ
多种方法实现Tab切换—面向过程&面向对象&Jquery方法
louShuMei 的博客
11-06 4025
TAb切换思路一: 判断是否为当前点击对象，来增加类名和减少类名 要在面向过程的基础上改写成面向对象的方法，需要经过四个步骤： 1、创建构造函数 2、将变量变成对象的属性 3、将函数变成对象的方法 4、实例对象<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab1_三种方法实现</tit
获取当前页面url参数的三种方法
louShuMei 的博客
08-25 3757
知识先填坑： location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号(包含？)?之后的部分） 假设访问路径为：file:///Users/xiao**/learn/js_basics/11.html?a=100&b=20&c=30； 分别通过【正则匹配】、【拆分字符串成数组】、【新API URLSearchParams】三种方式获取参数方法如下： 方法一、正则方法匹配需要的参数 //search属性获取到带？的参数字符串 console.l
如何用class实现继承、本质是什么?
louShuMei 的博客
04-14 1545
[constructor] 属性返回对创建此对象的数组函数的引用。 [extends] ES6关键字用来创建一个普通类或者内建对象的子类 [super] ES6关键字用于访问和调用一个对象的父对象上的函数。 // 父类 class People{ constructor(name){ this.name=name } eat() { co...
前端使用异步的场景有哪些
louShuMei 的博客
05-08 1542
同步和异步的区别是什么 javascript语言是单线程机制。所谓单线程就是按次序执行，执行完一个任务再执行下一个。 【同步】:按照一定的顺序去执行，执行完一个才能执行下一个,会阻塞代码执行 【异步】:不会阻塞代码执行 前端使用异步的场景有哪些 1. 网络请求，如 ajax请求、图片加载 //ajax请求 console.log('start') $.get('./data.json',function(data){ console.log(data) }) console.log('end')
Ajax与JavaScript高级程序设计笔记详解
"Ajax高级笔记JavaScript高级程序设计笔记主要涵盖了Ajax技术的高级应用以及JavaScript的高级编程技巧。本文档旨在帮助开发者深入理解Ajax的核心机制，包括XMLHttpRequest对象的使用，以及如何在各种浏览器环境中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值