ajax-数据交互/页面不切换

##页面不切换变动

AJAX:
全称:Asynchronous Javascript And Xml,表示异步的 JS 和 xml,通过 JS 异步的向服务器器发送请求并接收响应数据。

 

创建异步对象
var xhr = null
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject('Microsoft.XMLHttp')
}

使用异步对象
1.请求异步处理的方式，和请求地址
2.绑定监视事件状态
3.发送

get类型:参数跟在url后面，用？隔开'/demo03_handle?name=chen&age=18' send(null)

xhr.open('GET', '/demo03_handle?name=chen', true)

xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
tip.innerHTML = xhr.responseText
}
}
xhr.send(null)

 

post类型:参数放在send()里面 再将Content-Type请求消息头的值再更更改回application/x-www-form-urlencoded

xhr.open('POST', '/demo03_handle', true)

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
tip.innerHTML = xhr.responseText
}
}
xhr.send('name=chen&age=18')

注意： 1.xhr.responseText 是 路由'/demo03_handle'视图函数函数的返回值
2.和表单提交一样，与装饰路由的参数methods=['post']，提取方法一样
3.接收数据方法一样，request.args.get(age) / post方式request.form.get(name)