ajax的数据传递和ajax传输XML的数据

冷不防 2023-07-17 06:48 40阅读 0赞

# 一、get方法 #

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script type="text/javascript" src="../jQueryLib/jQuery.max.js"></script>
            <style type="text/css">
                *{ 
                    margin: 0;
                    padding: 0;
                }
            </style>
            <script type="text/javascript" defer="">
                $(function () { 													//get方式
                    $($('button')[0]).on('click', function () { 
                        var xhr = new XMLHttpRequest();							//创建XMLHttpRequest对象
                        xhr.open('get', './test02.php?username=李明');			//设置请求头，并get传递数据,异步传输
                        xhr.send(null);											//发送空请求体，并发送请求
                        xhr.addEventListener('load', function () { 				//回调函数，在得到响应后进行处理
                            alert('你好,' + xhr.responseText);					//打印
                        })
                    });
                })
            </script>
        </head>
        <body>
            <button>点我GET</button>
            <button>点我POST</button>
        </body>
    </html>

### 对应的test02.php文件 ###

<?php
        echo $_GET['username'];

### 输出结果： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]

# 二、post方法 #

$($('button')[1]).on('click',function () { 												//post方式
                        var xhr=new XMLHttpRequest();										//创建XMLHttpRequest对象
                        xhr.open('post','./test03.php');									//设置请求头，并post传递数据,异步传输
                        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');	//post传递要确定数据的格式
                        xhr.send('username=李明');											//发送post请求体，并发送请求
                        xhr.addEventListener('load',function () { 							//回调函数，在得到响应后进行处理
                            alert('你好,'+xhr.responseText);								//打印
                        })
                    })

### 对应的test03.php文件 ###

<?php
        echo $_POST['username'];

### 结果： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]

### 同步传输 ###

**默认是异步传输，一般都不会使用同步传输**

xhr.open('get', './test02.php?username=李明',false);
    xhr.open('post','./test03.php',false);

### 为了更好的兼容性 ###

可以改一下回调函数

xhr.addEventListener('readystatechange',function () { 
                            if (xhr.readyState===4&&xhr.status===200){ 
                                alert('POST你好,'+xhr.responseText);
                            }
                        })

三、ajax传输XML的数据  
上面的get和post可以传输比较简单的数据，因此有两种解决方法，一种是传输一个xml格式的dom树，另一种是json方法，这里介绍前一种方法。  
XML文档

<?xml version="1.0" encoding="UTF-8" ?>
    <students>
        <uname>李玲</uname>
        <num>001</num>
        <gender>female</gender>
    
        <uname>李明</uname>
        <num>002</num>
        <gender>male</gender>
    
        <uname>李华</uname>
        <num>003</num>
        <gender>male</gender>
    </students>

PHP

<?php
        header('Content-type:text/xml','charset=utf-8');//告诉浏览器传回来的数据格式是XML
        $xml=file_get_contents('./lll.xml');			//读取xml文件
        echo $xml;										//返回一个xml类型的dom树

HTML

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script type="text/javascript" src="../jQueryLib/jQuery.max.js"></script>
            <style type="text/css">
                *{ 
                    margin: 0;
                    padding: 0;
                }
            </style>
            <script type="text/javascript" defer="">
                $(function () { 
                    $('button').on('click',function () { 
                        var xhr=new XMLHttpRequest();
                        xhr.open('post','test03.php');
                        xhr.setRequestHeader('Content- type','Capplication/x-www-form-urlencoded');		//告诉服务器传输的数据类型
                        xhr.send($('input').val());		//发送请求
                        xhr.addEventListener('readystatechange',function () { 
                            if (xhr.status==200&&xhr.readyState==4){ 
                                console.log(xhr.responseXML.querySelector('uname').innerHTML);
                                //因为xhr.responseXML返回的是一个xml类型的dom树，所以可以采取获取html的dom元素的方法去获取xml里面的数据
                            }
                        });
                    })
                });
            </script>
        </head>
        <body>
            <input type="text" value="" size="20"/>
            <button>点我POST</button>
        </body>
    </html>

本文只用于个人学习和记录

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230528/b100ad8b3e174e588f242671400b25b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]: /images/20230528/c5b534b4bc864458ab2bafbe09737aaf.png