AJAX

最新推荐文章于 2024-03-04 19:33:24 发布

weixin_46126761

最新推荐文章于 2024-03-04 19:33:24 发布

阅读量299

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/weixin_46126761/article/details/105800518

版权

AJAX数据提交（open）

一般数据提交给服务器有两种方式
第一种是表单提交
第一种是表单提交，通过表单submit触发，提交到form中action属性地址，使用的方法是method给出的这种方式有个缺陷，需要跳转页面。

部分内容可以进行SEO优化

第二种是通过ajax提交的
第二种是通过ajax提交的，就不能触发submit,而是通过按钮点击，直接使用ajax发送给服务端，而发送到的地址就是open中的第二个参数，按什么格式发送就是open的第一个参数，不需要跳转页面，

缺陷：部分内容无法进行SEO优化

注意：在提交数据时，这两种方式只能按其中一种方式提交（以上两种情况只能二选一）

XMLHttpRequest设置

我们与服务器通信的API就是XMLHttpRequest。
那么我们都需要那些步骤来通信呢，简单理解一共只有4步。
1、新建XMLHttpRequest对象
var request=new XMLHttpRequest();

重点：IE 7以下 var request=new ActiveXObject(“Microsoft.XMLHTTP”);

2、打开要发送的地址通道。
request.open(“GET”,地址，同步/异步)；

3、给XMLHttpRequest对象增加侦听器，用来侦听各种情况，包括各种链接状态
request.addEventListener(“load”,侦听函数)发送数据给打开的地址，4、如果没有要发送的内容直接send（）
request.send();

SON字符串转换为JSON对象

JSON字符串:    var str1 = '{ "name": "cxh", "sex": "man" }';

    var obj = eval('(' + str + ')');//由JSON字符串转换为JSON对象
    或者
    var obj = JSON.parse(str); //由JSON字符串转换为JSON对象(常用)

将JSON对象转化为JSON字符串
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

Open（发送）

通过XMLHttpRequest ，你可以很容易的取回一个URL上的资源数据。尽管名字里有XML,，但 XMLHttpRequest 可以取回所有类型的数据资源，并不局限于XML。而且除了HTTP ,它还支持file 和 ftp 协议。

因此不要局限于网络通信，他同样也可以做当前服务中的文件调用

Open方法的参数主要包括

DOMString method,

		DOMString url,

		optional boolean async,

		optional DOMString user,

		optional DOMString password

method格式设置
请求所使用的HTTP方法; 例如 “GET”、“POST”、“PUT”、"DELETE"等。如果下个参数是非HTTP(S)的URL，则忽略该参数。

1、下面有重点讲解GET和POST内容

2、如果获取的是非HTTP，该参数GET。

url地址
该请求所要访问的URL，同样可以请求本地的文件

如果地址是http协议的，如果需要端口号必须加上端口号。

url地址是一个比较强大的内容，如果给服务器传参不需要加密的话，可以通过url来进行传参，通常传参的方法是http://地址：端口/文件名？参数1=值1&参数2=值2

下面会详细讲解。

async设置异步或者同步，为第三个参数设置

一个可选的布尔值参数，默认为true,意味着是否执行异步操作

如果值为false,则send()方法不会返回任何东西，直到接受到了服务器的返回数据。

如果为值为true，一个对开发者透明的通知会发送到相关的事件监听者。这个值必须是true，如果multipart 属性是true，否则将会出现一个意外。

user和password
分别为：
用户名,可选参数,为授权使用;默认参数为空string.

密码,可选参数,为授权使用;默认参数为空string.

http头部（下面案例中会用到）
getResponseHeader获取头部指定的属性值

getAllResponseHeaders 获取所有头部属性

数据提交格式：（ Method GET/POST/PUT/DELETE ）
GET格式
通过地址栏后面 ? 带入字符串，字符串格式是变量 = 值 & 变量 = 值的方式传递数据给服务器

这种方式仅仅去服务端获取，没有单独传递数据，并且从服务端获取需要内容

这个就是GET传递给服务器的数据少，而且是明文传递，只能使用字符串，并且数据无法进行多样性嵌套

如果地址是当前页面锚点是可以提交提交页面

POST格式
数据不是通过地址栏发送，通过数据握手后信道发送数据，并且会将数据转换为二进制数据发送给服务器

传送数据可以是任意复杂度数据，但是传送的数据类型，包含了字符串，二进制流其他一些格式

当数据提交传输时，会涉及到跨域的问题
因为使用表单提交时，是跳转页面，跳转就不需要考虑回来的问题，所以不牵扯跨域

但是ajax是访问别的网站并且将数据取回，这就需要考虑跨域问题

URL 表示发送的地址，如果是GET方式，可以在地址后面增？参数=值传递数据

open参数

open的第三个参数是async 异步,默认是true,默认是异步返回数据,如果设置为false,表示同步等待

open的第四个和第五个参数是用户名和密码,有些地址访问是需要用户名和密码

Form数据提交示例

<form method="POST" action="http://localhost:4010/a.php"> 
        <input type="text" name="user">
        <button type="submit">提交</button>
    </form>

ajax数据提交示例

var xhr=new XMLHttpRequest();
        xhr.addEventListener("load",loadHandler);
        open(method,url,async,userName,password);
        // method  GET/POST/PUT/DELETE
        //  URL 表示发送的地址，如果是GET方式，可以在地址后面增？参数=值传递数据
        //  open的第三个参数是async 异步,默认是true,默认是异步返回数据,如果设置为false,表示同步等待
        //  open的第四个和第五个参数是用户名和密码,有些地址访问是需要用户名和密码
         xhr.open("POST","http://localhost:4010/a.php");
        // 如果直接同post发送给php,php无法接收到数据
        // 设置请求头 如果前端需要通过POST发送数据给php页面,就需要写这个请求头,给nodejs服务发送POST请求时不用写
        // 这个请求头必须写在open之后,send之前
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
        xhr.send("user=xietian");

Php文件部分

<?php
// php写入允许跨域的响应头
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Headers:*");
print_r($_SERVER);
// echo相当于node中write
// echo "<div>";
// echo $_POST["user"];
// echo "</div>";

注意：当通过ajax内使用POST格式发送数据到php时，需要在ajax内设置请求头
请求头内容：xhr.setRequestHeader(“content-type”,“application/x-www-form-urlencoded”)

数据提交总结

1、表单提交还是ajax发送,表单不需要跨域,ajax需要考虑跨域

2、使用GET还是使用POST,数据发送的形式不同,一个是地址后缀,一个是send发送

3、如果使用POST,是发送给NodeJs还是发送给PHP,服务器语言不同,处理方式不同

4、AJAX—>POST—>PHP 需要写请求头xhr.setRequestHeader

Ajax 请求本地数据（只能读取不能改写）
Ajax请求数据时，不单单可以请求服务器数据,还可以请求本地数据

加载本地文件
可以加载本地文件，在本地文件内得到我们需要的数据

//加载文本文件
        var xhr=new XMLHttpRequest();
        xhr.addEventListener("load",loadHandler);
        xhr.open("GET","./a.txt");
        xhr.send();
        function loadHandler(e){
            // console.log(this.response);
            var div=document.querySelector("div");
            div.textContent=this.response;
        }

加载外部的json文件注意只能读取,不能写入
一般我们在开发项目时需要一个外部文件储存数据，在html内写入格式，然后把外部数据直接代入生成，这样的模式，方便修改和维护

//   加载外部的json文件  注意只能读取,不能写入
        var xhr=new XMLHttpRequest();
        xhr.addEventListener("load",loadHandler);
        xhr.open("GET","./config.json");
        xhr.send();
        function loadHandler(e){
            var obj=JSON.parse(this.response);
            console.log(obj.backgroundColor);
            document.documentElement.style.backgroundColor=obj.backgroundColor;
           
        }

加载外部XML文件
一般我们在开发项目时需要一个外部文件储存数据，在html内写入格式，然后把外部数据直接代入生成，这样的模式，方便修改和维护
XML 是全语言共通数据

缺陷是数据太大

 var xhr=new XMLHttpRequest();
        xhr.addEventListener("load",loadHandler);
        xhr.open("GET","./a.xml");
        xhr.send();
        function loadHandler(e){
            xml=xhr.responseXML;
            // var num=xml.getElementsByTagName("num")[0].textContent;
            var bn=xml.querySelectorAll("bk>man")[0];
            console.log(bn.getAttribute("name"));
        }

加载图片
加载本地图片获得的数据将会是二进制数据，需要时会再次将数据合成为图片，这个样式可用于图片上传

// 加载图片
        var xhr=new XMLHttpRequest();
        xhr.addEventListener("load",loadHandler);
        xhr.open("GET","./img/2-.jpg");
        xhr.send();

        function loadHandler(e){
            console.log(this.response);
        }

加载本地html
加载本地html文件时，可以直接将本地html文件放在当前页面需要该html文件内的界面样式的标签内

一般用于设置头部固定导航样式，和底部固定导航样式

 // 加载html
        var xhr=new XMLHttpRequest();
        xhr.addEventListener("load",loadHandler);
        xhr.open("GET","./a.html");
        xhr.send();
        function loadHandler(e){
            // console.log(this.response);
            var div=document.querySelector("div");
            div.innerHTML=this.response;
        }

同步和异步

Ajax获取数据时异步进行的，数据发送到服务端，然后服务端再发送回来，需要一定的时间

//    异步  
   var xhr=new XMLHttpRequest();
    xhr.addEventListener("load",loadHandler);
    xhr.open("POST","http://localhost:4010/a.php");
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
    xhr.send("user=xietian");
    console.log("a");

    function loadHandler(e){
        console.log(this.response);
        console.log("b");
    }
    console.log("c");

打印结果：a c b

Ajax异步转同步

 var xhr=new XMLHttpRequest();
        // xhr.addEventListener("load",loadHandler);
        // open的第三个参数是async 异步,默认是true,默认是异步返回数据,如果设置为false,表示同步等待
        // 禁止大家使用同步功能
        xhr.open("POST","http://localhost:4010/a.php",false);
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
        xhr.send("user=xietian");
        console.log("a");
        // 阻塞式同步,等待数据返回后,继续执行
        console.log(xhr.response);
        console.log("c");

请求数据与响应数据
请求消息客户端发送给服务端的消息

响应消息服务端发送给客户端的消息

请求消息头
请求消息中需要裹挟着一些说明型的数据，让服务端收到后根据这些数据比对和解析

这种数据一般比请求消息更早的发到服务端，服务端就可以解析了，这种数据就是请求头

// 请求消息 中需要裹挟着一些说明型的数据，让服务端收到后根据这些数据比对和解析
        // 这种数据一般比请求消息更早的发到服务端，服务端就可以解析了，这种数据就是请求头
        var xhr=new XMLHttpRequest();
        xhr.addEventListener("load",loadHandler);
        xhr.open("POST","http://localhost:4010/a.php");
        // 在ajax中设置请求头通过xhr.setRequestHeader(请求头名，请求头值);
        // 可以写多条语句设置
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xhr.setRequestHeader("names","xiaojian");
        xhr.send("user=xiaojian");

        function loadHandler(e){

        }

Php部分

<?php
// php写入允许跨域的响应头
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Headers:*");
print_r($_SERVER);
// echo相当于node中write
// echo "<div>";
// echo $_POST["user"];
// echo "</div>";

自定义消息头（通过消息头传输数据）
在客户端中可以设置请求头和获取响应头

在服务端中可以获取请求头和设置响应头

这个是自定义的请求头，如果跨域时，请求头也必须设置允许跨域才可以发送

设置请求头必须写在open和send之间

案例

// 在客户端中可以设置请求头和获取响应头
        // 在服务端中可以获取请求头和设置响应头
        var xhr=new XMLHttpRequest();
        xhr.addEventListener("load",loadHandler);
        xhr.open("POST","http://localhost:8000");
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        // 这个是自定义的请求头，如果跨域时，请求头也必须设置允许跨域才可以发送
        xhr.setRequestHeader("dataType","json");
        // 设置请求头必须写在open和send之间
        xhr.send("user=xietian");

        function loadHandler(e){
            // 获取所有响应头消息
            console.log(xhr.getAllResponseHeaders());
            // 获取指定的响应头消息
            console.log(xhr.getResponseHeader("content-type"));
        }

案例的node.js部分

var http=require("http");
var query=require("querystring");
var arr=[];
var ids=0;
var server=http.createServer(function(req,res){
    // 当前端使用post发送数据时，数据不在url中，而在data中
    var str="";
    req.on("data",function(_data){
        str=_data.toString();
        console.log(str);
        // console.log(_data);
    });
    req.on("end",function(){
        // req.method  就是请求的方式是get还是post
        // 在nodejs中req.headers就是前端发来的请求头消息
        // console.log(req.headers)
        if(req.method.toLowerCase()==="get"){
            str=req.url.split("?")[1];
        }
        
       /*  var obj=JSON.parse(str);
        var a=arr.filter(item=>{
            return item.name===obj.name;
        });
        if(a.length===0 && str && str.length>0){
            ids++;
            obj.id=ids;
            arr.push(obj);
        }
        console.log(arr); */
        res.writeHead(200,{
            "content-type":"text/html;charset=utf-8",
            "Access-Control-Allow-Origin":"*",
            // 允许请求头数据跨域
            "Access-Control-Allow-Headers":"*"
        })
        if(req.url.indexOf("get")>-1){
            res.write(JSON.stringify(arr));
        }else{
            res.write("数据已录入");
        }
        res.end();
    })
})

server.listen(8000);
// ctrl+c  停止服务
// 主要修改了这个js文件，就需要停止原来的服务，并且重新开启

abort
abort() 方法将终止请求，如果该请求已被发出。当一个请求被终止，它的 readyState 属性将被置为0（ UNSENT ），但是并不触发 readystatechange 事件。

send（发送内容）
发送请求，如果该请求是异步模式(默认)，该方法会立刻返回。相反，如果请求是同步模式，则直到请求的响应完全接受以后，该方法才会返回。

注意: 所有相关的事件绑定和数据必须在调用

send()方法之前进行
void send();参数设置
void send(ArrayBuffer data);类型化数组
void send(Blob data);二进制大对象，是一个可以存储二进制文件的容器。
void send(Document data); 文档对象
void send(DOMString? data); 文本数据
void send(FormData data); 数据对象，可以直接封装内容

send应用案例
下面案node.js部分

var http=require("http");
var query=require("querystring");
var arr=[];
var ids=0;
var server=http.createServer(function(req,res){
    // 当前端使用post发送数据时，数据不在url中，而在data中
    var str="";
    req.on("data",function(_data){
        str=_data.toString();
        console.log(str);
        // console.log(_data);
    });
    req.on("end",function(){
        // req.method  就是请求的方式是get还是post
        // 在nodejs中req.headers就是前端发来的请求头消息
        // console.log(req.headers)
        if(req.method.toLowerCase()==="get"){
            str=req.url.split("?")[1];
        }
        
       /*  var obj=JSON.parse(str);
        var a=arr.filter(item=>{
            return item.name===obj.name;
        });
        if(a.length===0 && str && str.length>0){
            ids++;
            obj.id=ids;
            arr.push(obj);
        }
        console.log(arr); */
        res.writeHead(200,{
            "content-type":"text/html;charset=utf-8",
            "Access-Control-Allow-Origin":"*",
            // 允许请求头数据跨域
            "Access-Control-Allow-Headers":"*"
        })
        if(req.url.indexOf("get")>-1){
            res.write(JSON.stringify(arr));
        }else{
            res.write("数据已录入");
        }
        res.end();
    })
})

server.listen(8000);
// ctrl+c  停止服务
// 主要修改了这个js文件，就需要停止原来的服务，并且重新开启

发送JSON字符串

// 发送JSON字符串
       var obj={
            user:"xietian",
            age:30
        }
        var xhr=new XMLHttpRequest();
        xhr.addEventListener("load",loadHandler);
        xhr.open("POST","http://localhost:8000");
        xhr.send(JSON.stringify(obj));

        function loadHandler(e){
           
        }

可以上传Blob数据，比如图片文件等
这个案例可用上传图片用

Css部分


```javascript
 <!-- multiple多选，可以选择多个文件 -->
    <form>  
        <input type="file" multiple>
        <button type="submit">提交</button>
</form>

Js部分

/ ________可以上传Blob数据，比如图片文件等
        var form=document.querySelector("form");
        form.addEventListener("submit",submitHandler);

        function submitHandler(e){
            e.preventDefault();
            var file=document.querySelector("[type=file]");
            console.log(file.files);
            // 上传文件
            var xhr=new XMLHttpRequest();
            xhr.open("POST","http://localhost:8000");
            xhr.addEventListener("load",loadHandler);
            xhr.send(file.files[0]);
            var xhr=new XMLHttpRequest();
            xhr.open("POST","http://localhost:8000");
            xhr.addEventListener("load",loadHandler);
            xhr.send(file.files[1]);
            var xhr=new XMLHttpRequest();
            xhr.open("POST","http://localhost:8000");
            xhr.addEventListener("load",loadHandler);
            xhr.send(file.files[2]);
        }

        function loadHandler(e){
            console.log(this.response);
        }


直接发送document或者可以直接将HTML发送给服务器，也可以将DOMString发送给服务器
 // -------直接发送document或者可以直接将HTML发送给服务器
        // 也可以将DOMString发送给服务器
        var x=new XMLHttpRequest();
        x.addEventListener("load",xmlLoadHandler);
        x.open("GET","./a.xml");
        x.send();

        function xmlLoadHandler(){
            // console.log(x.responseXML)
            var xhr=new XMLHttpRequest();
            xhr.addEventListener("load",loadHandler);
            xhr.open("POST","http://localhost:8000");
            xhr.send(x.responseXML);

        }
        
        function loadHandler(){
            
        }


formData 发送表单数据
// ------formData 发送表单数据
        var form=document.querySelector("form");
        form.addEventListener("submit",submitHandler);

        function submitHandler(e){
            e.preventDefault();
 		  // 获取到所有的表单信息，将这些信息赋值给变量fd
            var fd=new FormData(form);
 		  // 可通过循环遍历变量fd，得到里面的内容
            // for(var values of fd){
            //     console.log(values);
            // }
            var xhr=new XMLHttpRequest();
            xhr.addEventListener("load",loadHandler);
            xhr.open("POST","http://localhost:8000");
            // 也可以直接将这个表单数据提交，在node.js内解析
            xhr.send(fd);
        }

        function loadHandler(e){

        }


 直接发送document或者可以直接将HTML发送给服务器，也可以将DOMString发送给服务器


 // -------直接发送document或者可以直接将HTML发送给服务器
        // 也可以将DOMString发送给服务器
        var x=new XMLHttpRequest();
        x.addEventListener("load",xmlLoadHandler);
        x.open("GET","./a.xml");
        x.send();

        function xmlLoadHandler(){
            // console.log(x.responseXML)
            var xhr=new XMLHttpRequest();
            xhr.addEventListener("load",loadHandler);
            xhr.open("POST","http://localhost:8000");
            xhr.send(x.responseXML);

        }
        
        function loadHandler(){
            
        }


## formData 发送表单数据

```javascript
// ------formData 发送表单数据
        var form=document.querySelector("form");
        form.addEventListener("submit",submitHandler);

        function submitHandler(e){
            e.preventDefault();
 		  // 获取到所有的表单信息，将这些信息赋值给变量fd
            var fd=new FormData(form);
 		  // 可通过循环遍历变量fd，得到里面的内容
            // for(var values of fd){
            //     console.log(values);
            // }
            var xhr=new XMLHttpRequest();
            xhr.addEventListener("load",loadHandler);
            xhr.open("POST","http://localhost:8000");
            // 也可以直接将这个表单数据提交，在node.js内解析
            xhr.send(fd);
        }

        function loadHandler(e){

        }

timeout 超时因为各种因素导致数据前后端传递的延迟
request.timeout = 2000;

个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0，意味着没有超时。

超时并不应该用在一个 document environment 中的同步 XMLHttpRequests 请求中，否则将会抛出一个 InvalidAccessError 类型的错误。

当超时发生， timeout 事件将会被触发。必须设置在open以后，send之前。


```javascript

```javascript
```javascript
// _________________timeout  超时   因为各种因素导致数据前后端传递的延迟
        // 设置超时等待，如果超过超过这个时间，就切断数据发送

        var xhr=new XMLHttpRequest();
        xhr.open("POST","http://localhost:8000");
        xhr.addEventListener("load",loadHandler);

    // 超时事件，如果触发超时等待就会执行这个事件
    xhr.addEventListener("timeout",timeOutHandler)
    xhr.timeout=2000;//设置超时等待2秒
    xhr.send("aaa");

    function loadHandler(){

    }

    function timeOutHandler(e){
        xhr.abort();//将原来的链接断掉
        // 重新再创建并执行新的xhr的通信
    }




**readystate（这个是数据发送与接收的全过程）**
后面readystate将全面取代load事件

load事件以后再使用就是加载本地数据时使用

readystate因为是数据发送与接收的全过程所以它分为5个步骤，一般我们可以看到4个步骤（后面四个）


readystate实例

```javascript

```javascript

```javascript
// __________readystate
        // load事件以后再使用就是加载本地数据时使用
        var xhr=new XMLHttpRequest();
        // 在整个AJAX的通信中属于全过程监听，当状态改变时，触发该函数
        xhr.addEventListener("readystatechange",readyStateHandler);
        xhr.open("POST","http://localhost:8000");
        xhr.send("aaa");

        function readyStateHandler(e){
            console.log(this.readyState,this.status);
            if(this.readyState===4 && this.status===200){
                console.log(this.response);
            }
        }

```javascript
function ajax(data){
            return new Promise(function(resolve,reject){
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    if(xhr.readyState===4){
                        if(xhr.status===200){
                            resolve(xhr.response);
                        }else{
                            reject(xhr.status);
                        }
                    }
                }
                xhr.onerror=function(){
                    reject(xhr.status);
                }
                xhr.open("POST","http://localhost:8000");
                xhr.send(JSON.stringify(data));
            })
        }

        ajax({name:"xietian",age:30}).then(function(res){
            console.log(res);
        }).catch(function(err){
            console.log(err);
        })

事件
超时事件
当进度由于预定时间到期而终止时，会触发timeout 事件。

request.addEventListener(“timeout”,timeoutHandler);

loadstart 事件
当程序开始加载时，loadstart 事件将被触发。也适用于和元素.

Progress 事件
进度事件会被触发用来指示一个操作正在进行中。

loaded 当前加载字节
total 总字节

abort事件
当一个资源的加载已中止时，将触发 abort事件。

error事件
当一个资源加载失败时会触发error事件。

load事件
当一个资源及其依赖资源已完成加载时，将触发load事件。

timeout事件
当进度由于预定时间到期而终止时，会触发timeout 事件

loadend事件
当一个资源加载进度停止时 (例如，在已经分派“错误”，“中止”或“加载”之后)，触发loadend事件。这适用于例如 XMLHttpRequest调用, 以及或元素的内容。

loaded 已加载
total 总计数据

readystatechange 通信状态
当一个文档的 readyState 属性发生更改时，readystatechange 事件会被触发。

状态主要分：

1、信息  100-101

2、成功  200-206

3、重定向  300-307

4、客户端错误 400-417

5、服务器错误  500-505

weixin_46126761

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫