首页 > 编程笔记 > JavaScript笔记 > Ajax
阅读:28
AJAX发送GET和POST请求
在 AJAX 请求中,最常见的客户端传递参数的方式有两种:一种是 GET 请求,另一种是 POST 请求。POST 请求是向服务器传送数据,而 GET 请求是从服务器上获取数据。GET 请求传送的数据量非常小,而 POST 请求传送的数据量较大,一般被默认为不受限制。
查询字符串通过问号
在服务器端设计接收 POST 方式传递的数据,并进行响应。
【示例】为了方便开发,下面定义一个工具函数,该函数能够把数据转换为串行格式化字符串并返回。
发送 GET 请求
在 JavaScript 中,发送 GET 请求简单、方便,适用于简单字符串,不适用于大容量或加密数据。实现方法:将包含查询字符串的 URL 传入 open() 方法,设置第 1 个参数值为 GET 即可。服务器能够通过查询字符串接收用户信息。示例
下面示例以 GET 方式向服务器传递一条信息 callback=functionName。<input name="submit" type="button" id="submit" value="向服务器发出请求" /> <script> window.onload = function () { //页面初始化 var b = document.getElementsByTagName("input")[0]; b.onclick = function () { var url = "server.php?callback=functionName"; //设置查询字符串 var xhr = createXHR(); //实例化XMLHttpRequest 对象 xhr.open("GET", url, false); //建立连接,要求同步响应 xhr.send(null); //发送请求 console.log(xhr.responseText); //接收数据 } } </script>在服务器端文件(server.php)中输入下面的代码,获取查询字符串中 callback 的参数值,并把该值响应给客户端。
<?php echo $_GET["callback"]; ?>在浏览器中预览页面,当单击提交按钮时,在控制台显示传递的参数值。
查询字符串通过问号
?
作为前缀附加在 URL 的末尾,发送数据是以连字符&
连接的一个或多个名值对。
发送 POST 请求
在 JavaScript 中,POST 请求允许发送任意类型、长度的数据,多用于表单提交,以 send() 方法进行传递,而不以查询字符串的方式进行传递。POST 字符串与 GET 字符串的格式相同。格式如下:send("name1=value1&name2=value2...");
示例
使用 POST 方法向服务器传递数据。window.onload = function () { //页面初始化 var b = document.getElementsByTagName("input")[0]; b.onclick = function () { var url = "server.php"; //设置请求的地址 var xhr = createXHR(); //实例化XMLHttpRequest 对象 xhr.open("POST", url, false); //建立连接,要求同步响应 xhr.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded'); //设置为表单方式提交 xhr.send("callback=functionName"); //发送请求 console.log(xhr.responseText); //接收数据 } }在 open() 方法中,设置第一个参数为 POST,然后使用 setRequestHeader() 方法设置请求消息的内容类型为“application/x-www-form-urlencoded”,它表示传递的是表单值,一般使用 POST 发送请求时都必须设置该选项,否则服务器无法识别传递过来的数据。
在服务器端设计接收 POST 方式传递的数据,并进行响应。
<?php echo $_POST["callback"]; ?>
将 JSON 转换为字符串
GET 和 POST 方法都是以名值对的字符串格式发送数据的。对象信息
下面是一个包含 3 个名值对的 JSON 类型数据。{ user : "css8", pass : "123456", email : "css8@123.cn" }将 JSON 数据转换为串行格式化显示如下。
'user="css8" & pass="123456" & email="css8@123.cn"'
数组信息
下面是一组有序的 JSON 信息,包含多个值。[{name : "user", value : "css8"} , {name : "pass", value : "123456"), {name : "email", value : "css8@123.cn"}]将上面数据转换为串行格式显示如下。
'user="css8" & pass="123456" & email="css8@123.cn"'
【示例】为了方便开发,下面定义一个工具函数,该函数能够把数据转换为串行格式化字符串并返回。
//把JSON数据转换为串行字符串 //参数:data表示数组或对象类型的数据 //返回值:串行字符串 function JSONtoString (data) { var a = []; //临时数组 if (data.constructor == Array) { //处理数组 for (var i = 0; i < data.length; i ++) { a.push(data[i].name + "=" + encodeURIComponent(data[i].value)); } } else { //处理对象 for (var i in data) { a.push(i + "=" + encodeURIComponent(data[i])); } } return a.join("&"); //把数组转换为串行字符串,并返回 }
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频