前面我们上传文件采用的时form表单的形式,我们也可以使用ajax来实现文件的上传。ajax包括原生的ajax、jquery、伪ajax三种。
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件)。
XmlHttpRequest对象的主要方法:1. void open(String method,String url,Boolen async)
用于创建请求
参数:
method: 请求方式(字符串类型),如:POST、GET、DELETE...
url: 要请求的地址(字符串类型)
async: 是否异步(布尔类型)
2. void send(String body)
用于发送请求
参数:
body: 要发送的数据(字符串类型)
3. void setRequestHeader(String header,String value)
用于设置请求头
参数:
header: 请求头的key(字符串类型)
vlaue: 请求头的value(字符串类型)
4. String getAllResponseHeaders()
获取所有响应头
返回值:
响应头数据(字符串类型)
5. String getResponseHeader(String header)
获取响应头中指定header的值
参数:
header: 响应头的key(字符串类型)
返回值:
响应头中指定的header对应的值
6. void abort()
终止请求
那么现在创建一个ajax路由规则,定义视图函数并创建ajax模板,json路由用于接收信息:
ajax视图函数
def ajax(request):
return render(request,'ajax.html')
json视图函数
def json(request):
reg={'status':True,'data':None} #定义一个字典
import json #转换为字符串
return HttpResponse(json.dumps(reg))
ajax.html
<input type="button" value="ajax提交" onclick="Ajax();">
<script>
function Ajax() {
var xhr=new XMLHttpRequest(); /*创建对象*/
xhr.open('GET','/json/', true) /*get方式 提交到index页面 异步*/
xhr.send("name=root ; pwd=123"); /*以字符串的形式发送数据 注意分号*/
}
</script>
XmlHttpRequest对象的主要属性:
1. Number readyState
状态值(整数)
详细:
0-未初始化,尚未调用open()方法;
1-启动,调用了open()方法,未调用send()方法;
2-发送,已经调用了send()方法,未接收到响应;
3-接收,已经接收到部分响应数据;
4-完成,已经接收到全部响应数据;
2. Function onreadystatechange
当readyState的值改变时自动触发执行其对应的函数(回调函数)
3. String responseText
服务器返回的数据(字符串类型)
d. XmlDocument responseXML
服务器返回的数据(Xml对象)
4. Number states
状态码(整数),如:200、404...
5. String statesText
状态文本(字符串),如:OK、NotFound...
修改ajax.html页面的js函数:
<input type="button" value="ajax提交" onclick="Ajax();">
<script>
function Ajax() {
var xhr=new XMLHttpRequest(); /*创建对象*/
xhr.open('GET','/json/', true) /*get方式 提交到index页面 异步*/
xhr.onreadystatechange=function () { /* readyState中状态发生变化的时候执行这个函数 */
if(xhr.readyState===4){
//接收完毕
console.log(xhr.responseText); //接受服务器返回的字符串 {'status':True,'data':None}
}
}
xhr.send("name=root ; pwd=123"); /*以字符串的形式发送数据 注意分号*/
}
</script>
以上是发送的get请求,如果想要发送post请求,使用以上代码在服务器端就拿不到post的数据,这里需要设置请求头:
<input type="button" value="ajax提交" onclick="Ajax();">
<script>
function Ajax() {
var xhr=new XMLHttpRequest(); /*创建对象*/
xhr.open('POST','/json/', true) /*get方式 提交到index页面 异步*/
xhr.onreadystatechange=function () { /* readyState中状态发生变化的时候执行这个函数 */
if(xhr.readyState===4){
//接收完毕
var obj=JSON.parse(xhr.responseText)
}
}
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
xhr.send("name=root ; pwd=123"); /*以字符串的形式发送数据 注意分号*/
}
</script>
如果你没有设置请求头,那么在服务器后台就拿不到数据,一般出错都在这里,需要注意。
跨浏览器支持XmlHttpRequest
IE7+, Firefox, Chrome, Opera, etc.
ActiveXObject("Microsoft.XMLHTTP")
IE6, IE5
对于浏览器兼容就是XMLHttpRequest这句,我们可以写为window.XMLHttpRequest,具体可以进行一个判断:
<input type="button" value="ajax提交" onclick="Ajax();">
<script>
function getXHR(){
var xhr = null;
if(XMLHttpRequest){ //如果存在
xhr = new XMLHttpRequest();
}else{ //如过没有
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
function Ajax() {
var xhr=getXHR();
xhr.open('POST','/json/', true) /*get方式 提交到index页面 异步*/
xhr.onreadystatechange=function () { /* readyState中状态发生变化的时候执行这个函数 */
if(xhr.readyState===4){
//接收完毕
var obj=JSON.parse(xhr.responseText)
}
}
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
xhr.send("name=root ; pwd=123"); /*以字符串的形式发送数据 注意分号*/
}
</script>
声明:1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!