Ajax——10——GET封装

最新推荐文章于 2024-04-22 12:15:23 发布
最新推荐文章于 2024-04-22 12:15:23 发布
阅读量172 收藏
点赞数
分类专栏： Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x1037490413/article/details/104860551
版权

  1. HTML代码


    b.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="d.js"></script>
<!-- 括号里的ev,ev1,是event事件对象，所有的鼠标移动，键盘点击的详细状况都保存在这个形参里面-->
    <script>
        window.onload=function(ev){
            var oBtn=document.querySelector("button");
            //在你的发送请求中，不能出现中文 如何解决这个问题呢  处理参数中，需要将中文转换 比如 "wd=张三" 转换成wd=%E5%BC%AO%E4%B8%89这种类型
            var res=encodeURIComponent("张三");//js中的方法
            console.log(res);
            oBtn.onclick=function(ev1){
                //用ajax提交get请求，get请求会把参数放在url后面
                //url?key=value&&key=value;
        Ajax("a.php",{
            "userName":"lnj",
            "userPwd":"123456"//要把这种对象转换为服务器所需要的的格式
        },3000//设置超时 如果超过3秒，则会终止此次请求
            ,function (xhr){/*地址，请求成功要执行的的回调函数，请求失败的回调函数 括号里是异步对象*/
        alert(xhr.responseText);
                },function(xhr){
        alert("请求失败");
                })

            }
        }
    </script>

</head>
<body>
 <button>发送请求</button>
</body>
</html>

  1. js代码


    d.js 
function objtostr(obj){
    /*
            "userName":"lnj",
            "userPwd":"123456"
            "t":"16461231654"
    */
    obj.t=new Date().getTime();
    var res=[];
    for(var key in obj){
        //在url中是不可以出现中文的，如果出现了中文需要转码
        //可以调用encodeURIComponent方法
        //URL中只可以出现字母/数字/下划线/ASCII码
        res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key]));//[userName=lnj,userPwd=123456];
    }
    return res.join("&");//join方法把数组转换成字符串 ，并且元素与元素之间用&连接 userName=lnj&&userPwd=123456
}
function Ajax(url,obj,timeout,success,error){
    //0.将对象转换为字符串
    var str=objtostr(obj);
    /*三个会变的作为参数 地址，成功要执行的回调函数，失败的函数*/
    //兼容IE
    //1.创建一个异步对象
    var xmlhttp,timer;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.设置请求方式和请求地址(给创建的异步对象设置)
    /*
    method:请求的类型：GET或POST
    url:文件在服务器上的位置
    async:true(异步)或false(同步)  AJAX是异步请求，所以括号里永远填true
    */
    xmlhttp.open("GET",url+"?"+str,true)
    //3.发送请求  异步对0象发送请求
    xmlhttp.send();
    //4.监听状态的变化  监听的是异步对象的变化  只要异步请求发生了变化，就调用这个回调函数，代表请求已经完成
    xmlhttp.onreadystatechange=function(ev2){
        if(xmlhttp.readyState===4){
            clearInterval(timer);//接收到了响应，把定时器关掉
            /*
            存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

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

            */
            //判断是否请求成功  http状态码
            if(xmlhttp.status>=200&&xmlhttp.status<300||
                xmlhttp.status===304){
                //5.处理返回的结果
                /*
                服务器响应
                responseText获得字符串形式的响应数据
                responseXML 获得XML形式的响应数据
                */
               success(xmlhttp);
            }else{
                error(xmlhttp);
            }

        }
    }
    //判断外界是否传入了超时时间
    if(timeout){
        timer=setInterval(function(){
            console.log("中断请求");
            xmlhttp.abort();//中断请求
            clearInterval(timer);
        },timeout);
    }
}

  1. php代码


    a.php 
<?php
sleep(5);//当执行到php文件这段代码的时候，就会在这个地方停留五秒 为了验证超时设置是否有效
echo $_GET["userName"];
echo "<br>";
echo $_GET["userPwd"];
野生小米椒
关注
专栏目录
ajax——get函数的封装。
pengzihui的博客
03-11 265
<script> // 相对路径 var url = "data/hello.txt"; // 服务器绝对路径 // var url = "http://localhost/ajax/data/hello.txt"; document.onclick = function(){ var xhr = new XMLHttpReque...
AJAX——发送GET请求
zx2014567296的博客
08-09 3387
ajax 知识点 express框架（ajax需要框架，需要先安装node） 右击vscode的文件夹空白部分，输入指令npm init --yes（初始化） 编写express.js代码，右键单击该文件夹，选择“集成终端中打开”，输入指令node js文件夹的名字 ajax请求基本操作 创建对象 初始化，设置请求方法和 url 发送 事件绑定，处理服务端返回的结果 发送get请求 编写相关express框架 // 1.引入express const { response } = require('
AJAX——封装_简易axios
最新发布
weixin_48719464的博客
04-22 1215
需求：基于Promise + XHR 封装 myAxios函数，获取省份列表展示步骤：1.定义 myAxios函数，接收配置对象，返回Promise对象2.发起XHR请求，默认请求方法为GET3.调用成功/失败的处理程序4.使用myAxios函数，获取省份列表展示。
ajax请求get方法的封装,使用jQuery中Ajax的封装函数——$.get()
weixin_35572715的博客
08-05 200
MATLAB中图片格式与视频格式的转换参考：https://blog.csdn.net/iracer/article/details/48876473Matlab—将绘图保存为视频VideoWrite()函数用法与自定义视频尺寸可参考：https://blog.csdn.net/wenyusuran/article/details/28392061?locationNum=...SparkJava...
jQuery封装的ajax——参数
Viote.
12-06 2767
参数 options 类型：Object 可选。AJAX 请求设置。所有选项都是可选的。 async 类型：Boolean 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。 注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 beforeSend(XHR) 类型：Function 发送请求前可修改 XM...
AJAX——原生js实现封装
lmyh1111的博客
09-21 85
//封装ajax function ajax(method,url,fn,parms){ //1、创建对象 var xhr=new XMLHttpRequest(); //get 带有参数 if(method=='get'||method=='GET'&&parms!='undefined'){ url=erl+'?'+parms;...
Ajax的封装——Axios与jQuery
pro1822的博客
04-23 2959
Ajax的封装——Axios与jQuery
AJAX——仙女式封装（3）
qq_45903009的博客
10-11 128
AJAX的封装 一·模板引擎的使用（art-template） 模板引擎：目的是更容易将数据渲染到html中 artTemplate:https://aui.github.io/art-template/ 1·1：script 标签的特点是: innerHTML 永远不会显示在界面上 如果 type 不等于 text/javascript 的话，内部的内容不会作为 JavaScript 执行 1·2模板使用过程: 选择一个模板引擎 https://github.com/tj/consolidate.
AJAX——AJAX的异步与同步、AJAX代码封装
胖虎虎
08-14 835
接下来，手动封装一个工具类，这个工具类我们可以把它看做是一个JS的库。我们把这个JS库起一个名字，叫做jQuery。（我这里封装的jQuery只是一个前端的库，和后端的java没有关系，只是为了方便web前端代码的编写，提高WEB前端的开发效率）AJAX请求相关的代码都是类似的，有很多重复的代码，这些重复的代码能不能不写，能不能封装一个工具类。要发送ajax请求的话，就直接调用这个工具类中的相关函数即可。（大部分情况下我们都是使用ajax异步方式，同步很少用。使用以上库，怎么用？...
初识Ajax——jQuer中的ajax以及图书管理案例
qmj2324的博客
01-27 1157
初识Ajax——jQuer中的ajax以及图书管理案例
jQuery篇——Ajax基础之get请求
weixin_45273807的博客
08-11 432
什么是Ajax? AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。(属于前端而不是后端) 那如何使用Ajax呢？掌握以下五步，你就掌握了Ajax！ 创建一个异步对象 var xmlhttp=new XMLHttpRequest(); 设置请求方式和请求地址：.open方法，传入三个参数 method：请求的类型；GET 或 POST url：文件在服务器上的位置 ...
ES6笔记————promise创建，封装ajax，async与await
m0_45293340的博客
09-12 617
ES6笔记————promise创建，封装ajax，async与await
Axios请求（对ajax的二次封装）——Axios API、Axios实例、请求配置、Axios响应结构
XSL_HR的博客
04-14 1497
一篇文章带你学会axios请求——Axios API、Axios实例、请求配置、Axios响应结构
Ajax发送Post请求
x1037490413的博客
06-30 3383
注意：当修改js代码后，要重启一下服务 node server.js或者直接右键Run Code 一直报这样的错，端口号被占用了 解决办法： cmd中输入netstat -ano查询进程 找到占用端口号8080的进程PID号10016 再管理员模式下taskkill /PID 10016 不行的话强制终止这个进程 taskkill /PID 10016 /F server.js /* * @Description: * @Version: 2.0 * @Autor: Seven * @Date:
http协议以及如何在谷歌控制台查看通信报文
x1037490413的博客
06-08 1736
1.请求报文和响应报文 请求头的格式都是请求名：内容。请求报文中POST请求请求体可以有内容，GET请求请求体是为空的。 响应报文返回的是html格式的，会渲染成页面到客户端上 2.在谷歌控制台查看通信报文 打开控制台，点击Network 右下角就有具体信息，请求报文看 Request Headers（请求头和请求行）和下面的Query（请求体），响应报文看Response Headers（有响应头和响应行）和 Respose（响应体），Query String里面有参数信息。 如果有url参数，第四个是
Ajax请求超时与异常处理
x1037490413的博客
07-02 1131
超时设置，当服务器响应超时时，请求就取消 timeout属性等于一个整数，用来设置当请求发出后等待接受响应的时间。ontimeout()方法则是当等待超时后，自动执行的回调方法。 异常处理，谷歌控制台在Online设置Offline断网 server.js /* * @Description: * @Version: 2.0 * @Autor: Seven * @Date: 2021-06-09 15:59:55 * @LastEditors: Seven * @LastEditTime: 2
解决跨域——CROS
x1037490413的博客
07-06 777
server.js const { request } = require('express'); const express=require('express'); const app=express(); app.all('/cros-server',(request,response)=>{ //设置响应头才能跨域 响应头有很多个，可以根据需求选择 *是通配 所有网页都可用 response.setHeader("Access-Control-Allow-Origin", "*");
Ajax——07——post大文件上传
x1037490413的博客
02-29 722
注意：对于前端来说 1.上传文件一般使用POST提交 2.上传文件必须设置enctype="multipart/form-date" 对于后端来说 1.上传的文件在PHP中可以通过$_FILES获取 2.PHP中文件默认会上传到一个临时目录，接受完毕之后自动删除` ...
Ajax——11——POST使用和封装
x1037490413的博客
03-16 639
post的使用 关键代码，与get不同的地方 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //3.发送请求 异步对象发送请求 //传参 xmlhttp.send("userName=zs&...
jQuery Ajax封装与动态加载详解
本文将深入解析jQuery中的Ajax功能，包括其核心方法`$.ajax()`及其封装后的简化版本——`load()`和`get()`。 首先，`$.ajax()`是一个基础且灵活的方法，用于发起HTTP请求，支持各种HTTP方法（如GET、POST等），处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值