发送网络请求
1.表单发送请求
1.表单发送get请求
说明:
在form表单中通过action来设置请求的服务器地址.
- 默认情况下发送的请求是get请求，可以通过method方法来修改为使用post请求,
- 如果想要提交数据(参数)给服务器,那么在表单中必须要拥有name属性,只要添加了name属性,那么在提交数据的时候,系统会自动的把name里面的key和对应的value值拼接在一起,如果有多个参数那么就使用&来隔开;
- 如果是通过get提交给服务器端的数据,那么在php文件可以通过$_GET全局对象获取;
- 如果要获取传入的某个元素,那么就直接使用$_GET["key"]的方式来读取.
代码示例
<form action="01-get-php.php">
<input type="text" placeholder="请传入用户名" name="userName">
<input type="text" placeholder="请传入密码" name="password">
<input type="submit">
</form>
2.表单发送post请求
<form action="01-get-php.php">
<input type="text" placeholder="请传入用户名" name="userName">
<input type="text" placeholder="请传入密码" name="password">
<input type="submit">
</form>
服务器端具体处理：
echo $_POST["userName"]
echo $_POST["password"]
_GET获取get请求提交的数据_POST获取post请求提交的数据 $_FILES获取post请求提交的文件
3.表单进行文件上传
上传文件说明:
- 上传文件通过都发送post请求来实现（设置method）
- 获取上传的文件需要使用$_Files全局对象
- 进行文件上传的时候需要设置enctype属性（multipart/from-data）
- $_Files本身是一个对象（字典），保存所有上传的文件
具体的属性：name - 文件的名称
type - 文件的类型
tmp_name - 文件的临时存储路径
error- 错误信息
size - 文件的大小 - 用户上传的文件会保存在一个临时的文件夹中，如果用户没有进行后续的处理，那么这个临时的文件将被删除，因为服务器也有自己的容量限制，如果想要继续使用那么需要额外处理，否则就会被直接删除。
建议：可以使用move_uploaded_file（$_FILES["file"]["tmp_name"],新路径）把文件保存到安全的位置。 - 上传大文件修改修改服务器端的限制
说明：POST请求本身对文件的大小没有限制，但是服务器端会对文件的大小进行限制，如果要上传大文件，那么得设置让服务器端打开大文件上传的权限。
需要修改的文件为：
需要修改的配置为：
（1）是否允许上传
（2）上传的最大限制
（3）post请求的最大限制
（4）脚本执行的最大时间
（5）接收提交数据的时间
（6）最大内存消耗
修改文件之后，重启wamp服务器软件。
代码示例:
<form action="03-upload-php.php" method="post">
<input type="file" name="file">
<input type="submit">
</form>
2.Ajax发送get请求
简单介绍:
Ajax是一门异步的用于发送网络请求的技术。
全称为：Async javascript and XML
UI刷新：通常情况下，每次提交表达的时候，都会刷新界面，而使用ajax发送请求可以实现异步发送请求获取数据而不刷新界面效果。
具体示例：
a.蘑菇街加载数据，页面的内容在不断的加载，但是整个页面并没有刷新。
b.百度搜索框输入关键字，页面内容发生了变化，但是整个页面也没有刷新。
以上都是应用ajax技术来实现的。
具体说明：Ajax 这个概念是由 Jesse James Garrett 在 2005 年发明的。它本身不是单一技术,是一串技术的集合。
Ajax的优点:
1）不需要插件支持(一般浏览器且默认开启 JavaScript 即可);
2）用户体验极佳(不刷新页面即可获取可更新的数据);
3）提升 Web 程序的性能(在传递数据的时候不必整体提交);
4）减轻服务器和带宽的负担(将服务器的一些操作转移到客户端);
Ajax 的不足：
1）不同版本的浏览器度 XMLHttpRequest 对象支持度不足(比如 IE5 之前);
2）前进、后退的功能被破坏(因为 Ajax 永远在当前页,不会几率前后页面);
3）搜索引擎的支持度不够(搜索引擎爬虫还不能理解 JS引起变化数据的内容);
4）开发调试工具缺乏
使用Ajax发送网络请求的基本步骤:
- 创建异步对象（XMLHTTPRequest），存在兼容性问题;
- 请求请求路径（open）;
- 发送请求（send）;
- 监听请求的状态（onreadystatechange）;
- 处理请求结果.
onreadystatechange的几种状态：
- 请求未初始化 - 0
- 服务器连接已经建立 - 1
- 请求已经接收 -2
- 请求处理中 -3
- 请求已经完成，且响应已经就绪 -4
处理请求结果
- 当请求完成的时候再进行处理，即readyState == 4
- 通过响应码判断只有请求成功的时候才进行处理，即响应码>=200,<300或者是=304（缓存）
- 拿到服务器返回的响应体：response.Text
创建请求对象的兼容性处理：
if（window.XMLHTTPRequest）
{
var request = new XMLHTTPRequest();
}else
{
var request = new ActiveXObject("Microsoft","XMLHTTP");
}
使用Ajax发送网络请求代码示例
1. 缓存处理
在IE浏览器中（7），如果发送的是GET请求，那么只要URL没有发生变化，那么IE浏览器就会认为网页的内容也没有发生变化，因此会优先使用缓存数据，所以如果在IE浏览器中想让数据实时更新（获取到最新的数据），那么可以让每次请求的URL都不一样（即每次请求的URL地址不一样）。
在开发中可以使用随机数因子或者是时间戳来添加一个额外的参数给url路径。
（1）获取时间戳：var date = new Date();date.valueOf()
（2）获取随机数因子 Math.radom()
说明：
为url添加随机数或者是时间戳的目的在于让每次请求的时候url的内容都不一样
参数变化唯一的作用就是让每次发送网络请求的时候URL都不相同，以让服务器总是把最新的数据返回。
代码示例
// 数据处理方法
function json2str(data) {
var arr = [];
for(var key in data){
arr.push(key+"="+data[key]);
}
// 不能直接将中文提交给服务器, 中文需要编码之后再提交
return encodeURI(arr.join("&"));
}
// 发送请求方法
function myAjax(url, data,timeout,success, error) {
// 0.对参数进行处理
var res = json2str(data);
// 1.创建异步对象
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置URL
xhr.open("get", url+"?"+res, true);
// 3.发送请求
xhr.send();
// 4.监听状态
xhr.onreadystatechange = function () {
// 5.处理返回结果
if(xhr.readyState == 4){
// 清空定时器
clearTimeout(timer);
if(xhr.status >= 200 &&
xhr.status < 300 ||
xhr.status == 304){
success(xhr.responseText);
}else{
error(xhr.status);
}
}
}
// 6.对超时时间处理
var timer = setTimeout(function () {
alert("超时了");
// 中断请求
xhr.abort();
}, timeout);
}
3.Ajax发送post请求
Ajax发送post请求发送POST请求的注意点：
- 请求方法为post
- 把要提交的参数放在send方法中处理
- 必须设置请求头信息
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
封装好的代码示例
// 数据处理方法
function json2str(data) {
var arr = [];
for(var key in data){
arr.push(key+"="+data[key]);
}
// 不能直接将中文提交给服务器, 中文需要编码之后再提交
return encodeURI(arr.join("&"));
}
// 发送请求方法
// function myAjax(type, url, data,timeout,success, error) {
function myAjax(option) {
// -1.默认值处理
option.type = option.type || "get";
option.timeout = option.timeout || 15;
// 0.对参数进行处理
var res = json2str(option.data);
// 1.创建异步对象
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if(option.type == "get"){
// 2.设置URL
xhr.open(option.type, option.url+"?"+res, true);
// 3.发送请求
xhr.send();
}else{
// 2.设置URL
xhr.open(option.type, option.url, true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 3.发送请求
xhr.send(res);
}
// 4.监听状态
xhr.onreadystatechange = function () {
// 5.处理返回结果
if(xhr.readyState == 4){
// 清空定时器
clearTimeout(timer);
if(xhr.status >= 200 &&
xhr.status < 300 ||
xhr.status == 304){
option.success(xhr);
}else{
option.error(xhr.status);
}
}
}
// 6.对超时时间处理
if(!option.timeout){
return;
}
var timer = setTimeout(function () {
alert("超时了");
// 中断请求
xhr.abort();
}, option.timeout);
}
4.jQuery发送网络请求
get方法
代码:
<!--
必传参数：url
可选参数：data(发送给服务器端的参数-key-value)
可选参数：type(规定服务器端返回的数据类型:xml,html,json,text等)
可选参数：fn(请求成功的回调函数)
注意点：注意参数的顺序
-->
<script>
//01 获取页面中的按钮
var btn1 = $('.btn1');
//02 为按钮添加点击事件，发送请求
btn1.click(function () {
$.get("02-jQuery-network.php",
{username:"getname",password:"1234321"},
function (response) {
console.log("成功" + response);
console.log("____");
}
)
});
</script>
post方法
示例代码
<script>
//01 获取页面中的按钮
var btn2 = $('.btn2');
//02 为按钮添加点击事件，发送请求
btn2.click(function () {
$.post("02-jQuery-network.php",
{username:"张三","password":"123456"},
function (response) {
console.log("成功" + response);
}
)
});
</script>
ajax方法
注意点:
- 所有的参数都放在对象中传递
- 提交给服务器端的参数先拼接成字符串，然后设置成为data的属性值
$.ajax({
"url":"02-jQuery-network.php",
"data":"username=zhangsan&password=123456",
"success":function (data) {
console.log("成功" + data);
},
"error":function (dataCode) {
console.log("失败" + dataCode);
},
"type":"POST"
}
)
