前面我们上传文件采用的时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>
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>声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
