Ajax

最新推荐文章于 2022-09-27 17:34:31 发布
最新推荐文章于 2022-09-27 17:34:31 发布
阅读量159 收藏 1
点赞数
分类专栏： Ajax基础 文章标签： Ajax基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Smile_DaLin/article/details/99994619
版权

0.什么是Ajax
1.php基础
2.表单提交
3.后端获取
4.使用Ajax
5.ajax在IE浏览器的使用问题：
6.GET封装
7.POST封装
8.POST和GET封装
9.向jQuery的ajax改进：传递参数顺序不受影响
10.Ajax.XML
11.Ajax.json
12.Ajax.cookie
13.cooki封装
14.hash
15.Ajax的限制及其解决方法

0.什么是Ajax
用脚本发起http请求与服务器进行交互，能够不重新加载页面的情况下，完成与服务器进行交互，Ajax可用于异步请求，这样的好处就是可以活动XMLhttpRequest对象获得服务器的数据，通过Dom操作将新的数据插入文档中，减少客户端等待的时间

1.php基础
$ 变量名
输出echo,不能打印对象，数组，字
定义数组：$arr = array(1,2,3,4) ，输出数组，对象，字典要用：printf_r($arr)
典
获取本地xml文件：file_get_contents(“xxxx.xml”)
切记：要加上$运行代码要在服务器对应文件夹。

2.表单提交
在要提交的input 加上个name，表示提交的内容

3.后端获取
POST请求：printf_r($_POST)
GET请求：printf_r($_GET)
上传文件：print_r($_FilES)，
前端要加上: enctype:“multipart/form-data”，后端会将文件保存到临时路径
获取上传文件对应的字典：$fileInfo = $_FILES[‘input_Name’];
获取文件名称：$fileInfo [‘name’]
获取上传文件临时路径：$fileInfo [‘tmp_name’]
移动文件，保存被上传的文件：move_uploaded_file(file,newloc)//写路径拼接的时候用点. 若成功，则返回 true，否则返回 false。

上传大文件=>需要修改服务器的配置文件，再重启服务器。

4.使用Ajax:在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页。

（1）创建一个异步对象

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

（2）设置请求方式和请求地址
GET:
xmlhttp.open(“GET”,“test1.txt”,true);

或者
POST:
xmlhttp.open(“POST”,“ajax_test.asp”,true);

(2.5)设置指定请求头部
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);

（3）发送请求

GET:xmlhttp.send();
POST:xmlhttp.send("fname=Bill&lname=Gates");

（4）监听状态的变化onreadystatechange(xmlhttp的属性),判断状态码
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

xmlhttp.onreadystatechange = function(ev2){
if(xmlhttp.readyState === 4){
//判断是否请求成功
if(xmlhttp.status >= 200 && xmlhttp.status <300 || xmlhttp.status  === 304)
   }else{
   }
}

（5）处理返回的结果

xmlhttp.onreadystatechange = function(ev2){
if(xmlhttp.readyState === 4){
//判断是否请求成功
if(xmlhttp.status >= 200 && xmlhttp.status >300 ||xmlhttp.status = 304)
  alert(xmlhttp.responseText)
   }else{
     ........
   }
}

5.ajax在IE浏览器的使用问题：
（1）创建异步对象:
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
（2）缓存问题：发送get请求，IE认为每一个url只有1个结果。如果url没被修改了，文件修改之后不会实时（解决方法：访问的文件url要加Math.random()||new Date().get\Time参数，保证每次请求的时候url都不一样）

6.GET封装
思路：解决ie兼容问题，超时问题，ulr不能出现中文问题，参数问题
在js文件中：

function objToString(obj){
        obj.t = new Date().getTime();
        var res = [];
        for(var key in obj){
            //解决中文问题encodeURIComponent
            res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key]))
          }
          return res.join("&")
        }
        function ajax(url,obj,timeOut,success,error){
        //0.将对象转为字符串
        var str = objToString(obj)
        //1.创建异步对象
        var xmlhttp;
            if (window.XMLHttpRequest)
              {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
              }
            else
              {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
        //2.设置请求方式和url
        xmlhttp.open("GET",url+"?"+str,true);
        //3.发送请求
           xmlhttp.send();

           //4.监听变化，判断请求成功与否
               xmlhttp.onreadystatechange = function(ev2){
            if(xmlhttp.readyState === 4){
            //响应清除定时器
            clearInterval(timer)
            //判断是否请求成功
            if(xmlhttp.status >= 200 && xmlhttp.status >300 ||xmlhttp.status == 304)
            //5.处理响应结果
             success(xmlhttp)
               }else{
                 error(xmlhttp)
               }
            }
            //判断外界传入的超时时间
            if(timeOut){
                console.log('中断请求');
                timer = setInterval(function(){
                    xmlhttp.abort();
                    clearInterval(timer)
                },timeOut)
            }
          }

7.POST封装
在js文件中：

 function objToString(obj){
            obj.t = new Date().getTime();
            var res = [];
            for(var key in obj){
                //解决中文问题encodeURIComponent
                res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key]))
              }
              return res.join("&")
            }
            function ajax(url,obj,timeOut,success,error){
            //0.将对象转为字符串
            var str = objToString(obj)
            //1.创建异步对象
            var xmlhttp;
                if (window.XMLHttpRequest)
                  {// code for IE7+, Firefox, Chrome, Opera, Safari
                  xmlhttp=new XMLHttpRequest();
                  }
                else
                  {// code for IE6, IE5
                  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }
                  
            //2.设置请求方式和url
            xmlhttp.open("POST",url+str,true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            //3.发送请求
               xmlhttp.send(str);
    
               //4.监听变化，判断请求成功与否
                   xmlhttp.onreadystatechange = function(ev2){
                if(xmlhttp.readyState === 4){
                //响应清除定时器
                clearInterval(timer)
                //判断是否请求成功
                if(xmlhttp.status >= 200 && xmlhttp.status >300 ||xmlhttp.status == 304)
                //5.处理响应结果
                 success(xmlhttp)
                   }else{
                     error(xmlhttp)
                   }
                }
                //判断外界传入的超时时间
                if(timeOut){
                    console.log('中断请求');
                    timer = setInterval(function(){
                        xmlhttp.abort();
                        clearInterval(timer)
                    },timeOut)
                }
              }

8.POST和GET封装

function objToString(obj) {
        obj.t = new Date().getTime();
        var res = [];
        for (var key in obj) {
            //解决中文问题encodeURIComponent
            res.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]))
        }
        return res.join("&")
    }

    function ajax(type, url, obj, timeOut, success, error) {
        //0.将对象转为字符串
        var str = objToString(obj)
        //1.创建异步对象
        var xmlhttp;
        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        if (type.toLowerCase() == 'get') {
            //2.设置请求方式和url
            xmlhttp.open("GET", url + "?" + str, true);
            //3.发送请求
            xmlhttp.send();
        } else {
            //2.设置请求方式和url
            xmlhttp.open("POST", url + str, true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            //3.发送请求
            xmlhttp.send(str);
        }

        //4.监听变化，判断请求成功与否
        xmlhttp.onreadystatechange = function (ev2) {
            if (xmlhttp.readyState === 4) {
                //响应清除定时器
                clearInterval(timer)
                //判断是否请求成功
                if (xmlhttp.status >= 200 && xmlhttp.status > 300 || xmlhttp.status == 304)
                    //5.处理响应结果
                    success(xmlhttp)
            } else {
                error(xmlhttp)
            }
        }
        //判断外界传入的超时时间
        if (timeOut) {
            console.log('中断请求');
            timer = setInterval(function () {
                xmlhttp.abort();
                clearInterval(timer)
            }, timeOut)
        }
    }

9.向jQuery的ajax改进：传递参数顺序不受影响
将传入的参数变为对象的形式

function objToString(data) {
        data.t = new Date().getTime();
        var res = [];
        for (var key in data) {
            //解决中文问题encodeURIComponent
            res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
        }
        return res.join("&")
    }
function ajax(option) {
    //0.将对象转为字符串
    var str = objToString(option.data)
    //1.创建异步对象
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    if (option.type.toLowerCase() === 'get') {
        //2.设置请求方式和url
        xmlhttp.open(option.type, option.url + "?" + str, true);
        //3.发送请求
        xmlhttp.send();
    } else {
        //2.设置请求方式和url
        xmlhttp.open(option.type, option.url + str, true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        //3.发送请求
        xmlhttp.send(str);
    }

    //4.监听变化，判断请求成功与否
    xmlhttp.onreadystatechange = function (ev2) {
        if (xmlhttp.readyState === 4) {
            //响应清除定时器
            clearInterval(timer)
            //判断是否请求成功
            if (xmlhttp.status >= 200 && xmlhttp.status > 300 || xmlhttp.status == 304)
                //5.处理响应结果
                option.success(xmlhttp)
        } else {
            option.error(xmlhttp)
        }
    }
    //判断外界传入的超时时间
    if (option.timeOut) {
        console.log('中断请求');
        timer = setInterval(function () {
            xmlhttp.abort();
            clearInterval(timer)
        }, option.timeOut)
    }
}

10.Ajax.XML
XML:可扩展的标记语言，
格式：开头=><?xml version ='1.0' encoding="UTF-8" ?>
什么标签都可以，数据必须写在双标签里面。

<name>dalin</name>   //name:dalin

后端返回xml文件：header(“content-type:text/xml;charset-utf-8”) //防止乱码,一定要写在顶部
echo file_get_contents(“xxx.xml”);
前端获取XML:console.log(xmlhttp.responseXML)
返回的是document：<name>dalin</name>,
和html拿内容一样。

11.Ajax.json
json:固定的数据格式，实际是字符串，体积小，传输快，用户体验好
格式：{“”：“”}
后端读取json文件：echo file_get_contents(“xxx.txt”);
前端拿json:var str = xml.responseText;
将拿到的字符串转 为对象：JSON.pase(str)
注意：在低版本浏览器不可以 用原生的json.pase.得下载json2.js进行转化

12.Ajax.cookie
session： 服务器的会话跟踪技术
cookie：客户端会话跟踪技术，作用：将网页中的数据保存在浏览器中,默认不会保留任何数据，
保存数据：document.cookie = "name = dalin "
获取cookie保存数据：document.cookie;
cookie的生命周期=>默认：一次会话结束,关闭浏览器就没有了，不然就是过期日期

设置过期日期:
var date = new Date();
date.setDate(date.getDate()+过期天数)
 document.cookie = "name=dalin;expires="+date.toGMTString()+";";

document.cookie = “name:12;age:22”;

作用范围：在同一浏览器，默认情况下，上一级不能访问、下一级路径可以访问
如果要所以级也可以访问的，在保存的时候路径要为根路径（“/”）
document.cookie= “name:dalin;path=/;”;

注意：
cookie默认不会保留任何数据,
不能一次性保存多个数据,
有不同的个数和大小限制（4kb）
不同浏览器cookie保存数据不一样;
在同一浏览器，默认情况下，上一级不能访问、下一级路径可以访问
域名级数不同，访问不到，需要设置domin=根域名

完整的保存cookie：document.cookie=“name:dalin;path:’/;domin=根域名;”;

13.cooki封装

//增加
function addCookie(key,value,timeOut,path,domain){
//预处理path=>获取当前路径
var lastIndex = window.location.pathname.lastIndexOf("/");
var currentPath = window.location.pathname.split(0,lastIndex);
path = path||currentPath;
console.log( path);

//预处理domain=>获取当前域名
domain = domain|| window.domain;

//预处理过timeout
if(!timeOut){
    document.cookie = key+'='+value+';path='+path+';domain='+domain+';'
}else{
    var date = new Date();
    date.setDate(date.getDate+timeOut);
    document.cookie = key+'='+value+';expires='+date.toGMTString()+';path='+path+';domain='+domain+';'
}

}
//删除
function delCookie(key,path){
addCookie(key,getCookie(key),-1,path)
}
//查询

function getCookie(key){
var cooArr = document.cookie.split(";");
cooArr.some(item=>{
var temp = item.split("=")
if(temp[0].trim() == key){
console.log(temp[1])
return
}
})
}

14.hash
设置hash:window.location.hash = ;
获取hash:window.location.hash.subString(1)

15.Ajax的限制及其解决方法
由于浏览器同源策略的规则，Ajax只能访问同个域中的接口
解决办法：（1）CORS:跨源资源共享，在服务端的响应报文中指定一个跨源首部（*或者指定源信息），绕过同源限制。
（2）JSONP:借助<sc/ript>特点：src熟悉能访问任何资源，不受同源限制，访问的资源写在js中，所以下载后自动执行

Smile_DaLin
关注
专栏目录
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
开发入门篇之AJAX - onreadystatechange 事件
最新发布
不写代码没饭吃的博客
07-12 953
onreadystatechange事件是在XMLHttpRequest对象的就绪状态（readyState）改变时触发的事件。就绪状态是指XMLHttpRequest对象的属性readyState的值。
对onreadystatechange属性的理解
杨光的技术收集站
08-25 822
在编写Ajax方法的时候，我们经常会写上类似于这样的代码： script type="text/javascript"> var xmlHttp; //创建一个XmlHttpRequeset对象 function createXMLHttpRequest(){     if(window.ActiveXObject){          xmlHttp = new ActiveXO
四步完成ajax的使用
weixin_30338497的博客
07-06 723
什么是ajax? ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。 如何使用ajax? 第一步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象用来和服务器交换数据。var xhttp;if (window.XMLHttpRequest) { //现代主流...
AJAX（二）ResponseText、onreadystatechange 事件、readyState、status、ASP和PHP、数据库实例、XML实例
qq_43456781的博客
08-17 723
AJAX（二）ResponseText、onreadystatechange 事件、readyState、status、ASP和PHP、数据库实例、XML实例 文章目录AJAX（二）ResponseText、onreadystatechange 事件、readyState、status、ASP和PHP、数据库实例、XML实例1. 服务器响应（responseText）responseText 属性responseXML 属性2. onreadystatechange 事件（readyState、status
Ajax的使用四大步骤详解
畅游JAVA
12-22 8344
什么是ajax? ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。 如何使用ajax? 第一步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象用来和服务器交换数据。 ? 1 2 3
Ajax详解
07-22
资源名称：Ajax详解内容简介：《Ajax 详解》电子书 chm格式，是《四天学会Ajax》一书扩展，更加详细的讲述Ajax的方方面面。 内容简要给大家说明一下：Ajax简介、使用Javaｓｃｒｉｐｔ和Ajax发出异步请求、Ajax中的...
jquery.unobtrusive-ajax.rar
05-14
2. **事件处理**：库内部监听`ajaxStart`、`ajaxSend`、`ajaxSuccess`、`ajaxError`等事件，提供了对Ajax请求生命周期的控制。开发者可以通过自定义事件处理器来扩展功能或处理错误。 3. **内容替换**：默认情况下...
ajax 检测用户名是否被占用
01-21
try { ajax = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!=’...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
ajax笔记ajax笔记ajax笔记
04-03
ajax笔记
ajax smarty
06-15
form表单的enctype属性：设置表单的编码类型 1、enctype="application/x-... 说明：代表当前表单只能提交字符信息 2、enctype="multipart/form-data" 说明：代表当前表单不仅能提交字符信息也可以提交字节信息
Ajax高级程序设计pdf
05-16
**Ajax高级程序设计** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新，提高了用户体验，尤其...
SpringBoot整合Ajax
06-01
SpringBoot整合Ajax（无坑源码） 亲测有效，最简单实例 Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况...
C# 如何使用ajax请求
12-17
C# 使用 AJAX 请求的核心在于利用 ASP.NET AJAX 库来实现在客户端与服务器之间的异步通信。AJAX（异步JavaScript和XML）技术允许我们在不刷新整个页面的情况下更新网页的特定部分，提高用户体验。以下是详细步骤和...
onreadystatechange 事件
热门推荐
sereasuesue的博客
09-09 1万+
onreadystatechange 事件 当请求被发送到服务器时，我们需要执行一些基于响应的任务。 每当 readyState 改变时，就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 下面是 XMLHttpRequest 对象的三个重要的属性： 属性 描述 onreadystatechange...
xmlhttp的onreadystatechange为什么在open和send前面
qq_32888087的博客
06-20 1283
问题来源 最近在学习ajax请求，读到W3school官方文档对于 发送请求，和处理状态改变函数时，每次都把onreadystatechange 写在open()和send()前面，对此很疑惑！！如下图 链接：http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp 解释 open()只是初始化，做好准备发送， s...
【面试】onreadystatechange事件
qq_46580087的博客
03-17 3699
在困难面前，回避的时间越长，付出的代价就越大。
Ajax学习
weixin_63267832的博客
09-27 1326
使用xhr发起数据请求
Ajax到JQuery Ajax学习指南
"这篇教程主要关注的是从基本的Ajax技术过渡到使用JQuery的Ajax功能的学习。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值