【济南校区】PHP模块讲解之ajax(二)

上一节课我们简单的讲解了一下ajax的基本原理，今天我们就给大家带来ajax如何进行数据传递的

ajax发送数据传递的方式有两种：get方式和post方式

一、发送GET请求

1、 GET请求语法

xhr.open(‘get’,’url?query=value’);

xhr.send(null);

如果有参数，需要加在url的后面

2、 GET请求示例

html：

[JavaScript] 纯文本查看 复制代码

                window.onload = function(){[/align]                        $('#btnOk').onclick = function(){
                                //获取文本框的值
                                var first = $('#first').value;
                                var second = $('#second').value;
                                //创建ajax对象
                                var xhr = createxhr();
                                //生成参数字符串
                                var str = 'first='+first+'&second='+second;
                                //初始化ajax对象
                                xhr.open('get','demo.php?'+str);
                                //设置回调函数
                                xhr.onreadystatechange = function(){
                                        //如果对象的状态码为4(接受数据完毕)
                                        if (xhr.readyState == 4) {
                                                //获取结果
                                                $('#res').value = xhr.responseText;
                                        }
                                }
                                //发送ajax请求
                                xhr.send(null);
                        }
                }

php：

[PHP] 纯文本查看 复制代码

<?php
$first = $_GET['first'];
$second = $_GET['second'];

echo $first+$second;

运行结果：

二、发送POST请求

1、 get和post的区别

get：参数附加url后面

post：参数放在请求空白行的后面

get：最大传输量为2k

post：理论上无限制

get：只能传输文本数据

post：可以传输入文本和二进制数据

get的请求头

post的请求头

post请求时会比get请求多一个Content-Type的请求头，表示本次提交数据的类型

2、 Ajax中的post请求

xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);

post请求在IE下不会产生缓存问题

[JavaScript] 纯文本查看 复制代码

<script type="text/javascript">
                window.onload = function(){
                        $('#btnOk').onclick = function(){
                                //获取文本框的值
                                var username = $('#username').value;
                                var password = $('#password').value;
                                //创建ajax对象
                                var xhr = createxhr();
                                xhr.open('post','demo.php');
                                //设置请求头
                                xhr.setRequestHeader('Content-Type','Application/x-www-form-urlencoded');

                                //设置回调函数
                                xhr.onreadystatechange = function(){
                                        if (xhr.readyState == 4&&xhr.status ==200) {
                                                //获取结果
                                                alert(xhr.responseText);
                                        }
                                }
                                //发送ajax请求
                                xhr.send('username='+username+'&password='+password);
                        }
                }
</script>

到此为止，ajax的数据传输就给大家介绍到这里，不知道大家对我今天讲解的ajax的原理理解的如何，有什么问题可以在下面留言哦~

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！

黑马程序员济南中心联系电话：0531-55696830

感谢分享