什么是AJAX?
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
提交数据方式 GET or POST?
-
GET方式
1. 数据是拼接在url中
2. 数据的安全性不好
3. 数据的长度问题
理论上来说,url的长度是可以任意修改的。
有一些浏览器会限制url的长度。
有一些服务器 对于长度太长的url直接就屏蔽了
4. 测试方便
格式 : xxx.php?key1=value1&key2=value2&key3=value3
eg. getData.php?food=榴莲&doType=高压锅炖
-
POST方式
1. 提交的数据不在url中,安全性好一些
2. post提交数据没有长度限制,浏览器端只要你想随意添加,
服务器可以选择是否接受这么多的数据
4. 如果要上传文件 必须使用 post
注意:
post提交数据是由action属性提交的url,必须设置method为post(因为默认是get)
上传文件时,表单的form表单属性也需要填写清楚:
enctype:
默认值是 application/x-www-form-urlencoded
提交文件 multipart/form-data
请求报文 vs 响应报文是什么?
补 充:
浏览器中获取html页面,css js请求后台页面,
发送的都是 请求报文
服务器返回的是 响应报文
使用请求报文 响应报文这种方式进行数据的交互称之为HTTP协议
GET方法发送数据
1. 创建 异步对象
var xhr = new XMLHttpRequest();
2.设置请求行 (get请求 数据写在url后面)
xhr.open('get','xxx.php?name=coups&skill=dance');
eg.
xhr.open('get','getData.php?name=coups&skill=dance');
3.设置请求头
get请求可以省略设置请求头的操作,post不发送数据也可以省略
3.5.注册回调函数(请求响应回来之后触发)
xhr.onload = function(){
//获取数据
console.log(xhr.responseText);
}
4.请求主体发送
(get请求为空,或者写null,post请求数据写这里。如果没有数据,直接为空或者写null)
send(null);
POST方法发送数据
1. 创建 异步对象
var xhr = new XMLHttpRequest();
2.设置请求行 (get请求 数据写在url后面)
xhr.open('post','getData.php');
3.设置请求头
(get请求可以省略设置请求头的操作,post不发送数据也可以省略)
xhm.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
3.5.注册回调函数(请求响应回来之后触发)
xhr.onload = function(){
//获取数据
console.log(xhr.responseText);
}
4.请求主体发送
(get请求为空,或者写null,post请求数据写这里。如果没有数据,直接为空或者写null)
// post请求发送数据 写在send中
//key=value&key2=value2
xhr.send('name=崔胜澈?like=我');