ajax root,ajax基础 - root_jh - OSCHINA - 中文开源技术交流社区-CSDN博客

AJAX简介

ajax=异步JavaScript和XML

ajax是一种用于创建快速动态网页的技术

基于interner标准

建立在以下基础之上的网页技术

XMLHttpRequest 对象 (异步的与服务器交换数据)

JavaScript/DOM (信息显示/交互)

CSS (给数据定义样式)

XML (作为转换数据的格式)

AJAX特点

无需重新加载整个网页的情况下，便能够更新部分网页

通过在后台与服务器进行少量数据交换，使网页实现异步更新

和传统网页区别

不使用ajax：每次提交更新内容必须要重载整个页面

使用ajax：更新内容不需要重载整个页面

原生ajax

ajax相关语句

释义

obj = XMLHttpRequest()

jQuery实际调用的对象，也是ajax基础必备条件

obj.onreadystatechange

指定回调函数

obj.redystate

状态码指定回调函数状态，执行过程判断

obj.responseText

接收完成的数据

obj.open()

建立连接请求

obj.setRequestHeader()

发送的数据请求头

obj.send()

发送数据

redystate状态码

释义

未初始化，尚未调用open()方法

启动，调用open()但未调用send()方法

发送，调用send()方法，但未接受到响应

接收，已经接收到部分响应数据

完成，接受到全部响应数据

原生ajax示例

function Text(){

var xhr = new XMLHttpRequest(); #创建一个空对象

xhr.onreadystatechange = function(){ #指定回调函数

if (xhr.readyState == 4){ #回调函数状态

console.log("返回信息：",xhr.responseText)

}

};

xhr.open('GET','index.html?p=1'); #建立GET方式请求，并发送p=1数据

xhr.open('POST','index.html'); #建立POST方式请求

xhr.setRequestHeader('Conten-Type','application/x-www-foorm-urlencoded;charset-UTF-8');

#POST数据请求头，若不声明请求头只有请求体传输到后端，则Django无法解析，后端只有 request.body 才有数据体

xhr.send("p=456"); #建立的POST请求发送的数据

}

jQuery使用ajax

jQuery向后端传递参数

function 发送函数(){

$.ajax({

url:'/index.html', #传递路径，后加?参数为GET提交形式

type:'POST', #POST提交方式

#type:'GET', #GET提交形式

data:{'username':'root','password:'123'}, #发送数据

traditional:true, #用于传输列表/数组，不加则默认键多加个中括号

cache: false, #上传文件无需缓存

processData: false, #用于对data参数进行序列化处理

contentType: false, #用于传输包含对象数组嵌套等复杂的数据时候使用

success:function(arg){ #回调函数，arg是服务端返回的数据

函数体

}

error:function(){ #执行错误返回的错误信息

函数体

}

})

}

后端接收

单字典传输：request.提交方式.get('提交值的键') 字典包含列表/数组传输：request.提交方式.getlist('提交值的键')

def 接收函数(request):

user = request.POST.get('username') #接收发送过来的get请求的用户名

pwd = request.POST.get('password') #接收发送过来的get请求的密码

return 返回值

伪造ajax发送请求

特性：form + iframe 页面不刷新提交数据原理：利用 iframe 标签提交数据不刷新的特性，结合 form 表单利用 iframe 通道往后端发送数据

function showtime(ths) {

alert("函数已触发！")

console.log("iframe标签中嵌套的 windows 内容",ths.contentWindow)

console.log("iframe标签中嵌套的某个子标签内容",ths.contentWindow.document.body.innerHTML)

console.log("jQuery方式获取某个子标签内容",$(ths).contents().find('body').html())

}