Ajax——09——GET——IN兼容

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

一:如何实现IE浏览器兼容

在这里插入图片描述兼容代码可直接复制粘贴

HTML代码 b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 括号里的ev,ev1,是event事件对象，所有的鼠标移动，键盘点击的详细状况都保存在这个形参里面-->
    <script>
        window.onload=function(ev){
            var oBtn=document.querySelector("button")
            oBtn.onclick=function(ev1){
                //兼容IE
                var xhr;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xhr=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xhr=new ActiveXObject("Microsoft.XMLHTTP");
                }
                //2.设置请求方式和请求地址(给创建的异步对象设置)
                /*
                method:请求的类型：GET或POST
                url:文件在服务器上的位置
                async:true(异步)或false(同步)  AJAX是异步请求，所以括号里永远填true
                */
                xhr.open("GET","a.php",true)
                //3.发送请求  异步对0象发送请求
                xhr.send();
                //4.监听状态的变化  监听的是异步对象的变化  只要异步请求发生了变化，就调用这个回调函数，代表请求已经完成
                xhr.onreadystatechange=function(ev2){
               if(xhr.readyState===4){
                   /*
                   存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

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

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

               }
                }

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

php代码 a.php

<?php
echo "ajax get page";

二：如果用AJAX请求文本文件呢

在IE浏览器中，如果通过Ajax发送GET请求，那么IE浏览器认为同一个URL只有一个结果，也就是说更改文本里的内容，在别的浏览器打开发送请求会更新文本内容，而在IE里不会，地址不发生变化，就拿不到实时更新数据
解决方法：利用随机数或者时间，更新地址url，Math.random()或者new Date().getTime()
关键代码：xhr.open("GET","c.txt?t="+(new Date().getTime()),true)

HTML代码 ：b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 括号里的ev,ev1,是event事件对象，所有的鼠标移动，键盘点击的详细状况都保存在这个形参里面-->
    <script>
        window.onload=function(ev){
            var oBtn=document.querySelector("button")
            oBtn.onclick=function(ev1){
                //兼容IE
                var xhr;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xhr=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xhr=new ActiveXObject("Microsoft.XMLHTTP");
                }
                //2.设置请求方式和请求地址(给创建的异步对象设置)
                /*
                method:请求的类型：GET或POST
                url:文件在服务器上的位置
                async:true(异步)或false(同步)  AJAX是异步请求，所以括号里永远填true
                */
                xhr.open("GET","c.txt?t="+(new Date().getTime()),true);
                //3.发送请求  异步对0象发送请求
                xhr.send();
                //4.监听状态的变化  监听的是异步对象的变化  只要异步请求发生了变化，就调用这个回调函数，代表请求已经完成
                xhr.onreadystatechange=function(ev2){
               if(xhr.readyState===4){
                   /*
                   存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

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

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

               }
                }

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

txt c.txt

随便写什么内容

野生小米椒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生ajax——五步法写ajax、兼容
qq_44741877的博客
01-19 191
局部刷新技术 ajax请求：请求后端接口，返回数据到前端，前端根据需求渲染到界面 【五步法写ajax】 1.创建ajax对象 var http=new XMLHttpRequest(); 2.建立服务器连接 open（）的参数 （1）发送请求的参数 get post （2）api路径 （3）async 同步或者异步 值为：true异步/false同步 ·（可写可不写） 其中同步指的是等待请求完成之后再执行后续代码；异步则是请求和后续代码同时执行； （4）连接接口的账号 （5）密码 h
AJAX——异步处理技术
LJW123487的博客
05-15 1076
AJAX学习笔记
http协议get post请求的区别
independe的博客
04-16 159
GET在浏览器回退时是无害的，而POST会再次提交请求。 GET产生的URL地址可以被Bookmark，而POST不可以。 GET请求会被浏览器主动cache，而POST不会，除非手动设置。 GET请求只能进行url编码，而POST支持多种编码方式。 GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。 GET请求在URL中传送的参数是有长度限制的，而POST么有。 对参数...
前端面试总结（vue篇）
热门推荐
weixin_43734732的博客
07-21 2万+
vue的优点 1、vue是个轻量级的框架，是一个构建数据的视图集合，大小只有几十Kb 2、vue是组件化开发，适合多人开发 3、vue中的双向数据绑定更方便操作表单数据 4、因为vue是MVVM的框架，视图，数据，结构分离使数据的更改更为简单 5、vuex可以管理所有组件用到的数据，不需要借助之前props在组件间传值 6、官方文档通俗易懂，易于理解和学习； vue父子组件之间传递数据 1、父组件向子组件传递数据 通过props，例子如下 <template> <div> .
Ajax——10——GET封装
x1037490413的博客
03-14 163
HTML代码 b.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="d.js"></script> <!-- 括号里...
Ajax——get封装
jwz934738949的博客
09-07 186
function obj2str(obj) { obj.t = new Date().getTime() var res = [] for (var key in obj) { // 在传送数据时，有可能会出现中文，但是中文不被识别 // 使用encodeURIComponent实现对中文的转码 res.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key])) } return res.
Ajax——get与post封装
jwz934738949的博客
09-07 132
function obj2str(obj) { obj.t = new Date().getTime() var res = [] for (var key in obj) { // 在传送数据时，有可能会出现中文，但是中文不被识别 // 使用encodeURIComponent实现对中文的转码 res.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key])) } return res.
Ajax——跨域
weixin_45998300的博客
03-04 430
1.同源策略和跨域 同源：两个页面的协议，域名和端口都相同 同源策略：浏览器提供的一个安全功能 通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如： 1.无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB 2.无法接触非同源网页的 DOM 3.无法向非同源地址发送 Ajax 请求 跨域：与同源相反 实现跨域数据请求：JSONP 和 CORS JSONP：出现的早，兼容性好（兼容低版本..
AJAX——使用的四大步骤
lmyh1111的博客
09-19 1033
**什么是ajax?** AJAX（Asynchronous JavaScript and XML），最早出现在 2005 年的 Google Suggest，是在浏览器端进行网络编程（发送请求、接收响应）的技术方案，它使我们可以通过 JavaScript 直接获取服务端最新的内容而不必重新加载页面。让 Web 更能接近桌面应用的用户体验。 说白了，AJAX 就是浏览器提供的一套 API...
AJAX——新手快车道
09-05
**AJAX——新手快车道** AJAX（Asynchronous JavaScript and XML）是一种用于创建动态和交互式网页的技术，它改变了传统Web应用的工作方式。在没有AJAX之前，用户每次与网页互动，比如点击按钮或填写表单，都需要...
Ajax征服——相册模块 源码
01-11
- **兼容性**：考虑到不同浏览器对Ajax的支持程度，可能需要引入polyfill库或使用更低级的备选方案，如IFrame或隐藏的Form提交。 ### 5. 实战演练 "Ajax征服——相册模块 源码"提供了具体的实现代码，你可以通过...
JavaScript——Ajax
03-18
在实际开发中，开发者通常会使用jQuery、axios、fetch等库来简化Ajax操作，这些库提供了更友好的API，减少了兼容性问题。例如，jQuery的`$.ajax()`函数： ```javascript $.ajax({ type: 'GET', url: '...
Ajax教程 AJAX——新手快车道
10-03
1. **浏览器兼容性**：虽然大部分现代浏览器都支持AJAX，但在一些老版本浏览器中可能存在问题，需要使用库如jQuery来处理兼容性问题。 2. **安全问题**：由于AJAX请求仍然遵循同源策略，跨域请求需要服务器端设置...
Ajax发送Post请求
x1037490413的博客
06-30 3359
注意：当修改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 1701
1.请求报文和响应报文 请求头的格式都是请求名：内容。请求报文中POST请求请求体可以有内容，GET请求请求体是为空的。 响应报文返回的是html格式的，会渲染成页面到客户端上 2.在谷歌控制台查看通信报文 打开控制台，点击Network 右下角就有具体信息，请求报文看 Request Headers（请求头和请求行）和下面的Query（请求体），响应报文看Response Headers（有响应头和响应行）和 Respose（响应体），Query String里面有参数信息。 如果有url参数，第四个是
Ajax请求超时与异常处理
x1037490413的博客
07-02 1114
超时设置，当服务器响应超时时，请求就取消 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 760
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 702
注意：对于前端来说 1.上传文件一般使用POST提交 2.上传文件必须设置enctype="multipart/form-date" 对于后端来说 1.上传的文件在PHP中可以通过$_FILES获取 2.PHP中文件默认会上传到一个临时目录，接受完毕之后自动删除` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值