ajax:asynchronous javascript and
2019-12-24 本文已影响0人
罗斯福
如何发送请求
1,form可以发送请求，但是将导致刷新页面或者新开页面
2，a标签可以发送get请求，同样将导致刷新页面和新开页面
3，image可以发送get请求，但是请求的内容只能是图片
4，link可以发送get请求，但是请求的内容只能是css，和favicon的形式
5，script可以发送get请求，但是只能通过动态控制scrip脚本运行的方式
Ajax实现步骤
1.使用XMLHttprequest发请求
2，服务器返回XML形式的字符串，后面逐渐使用json形式返回字符串
3，JS解析XML并更新局部页面
json
json:javascript object Notation,是一种由[道格拉斯·克罗克福特]构想和设计、轻量级的[数据交换语言]该语言以易于让人阅读的文字为基础，用来传输由属性值或者序列性的值组成的数据对象,源自javascript
祥情请见：https://www.json.org/json-en.html
如何使用XMLhttprequest
var http = require('http')
var fs = require('fs')
var url = require('url')
var port = process.argv[2]
if(!port){
console.log('请指定端口号好不啦？\nnode server.js 8888 这样不会吗？')
process.exit(1)
}
var server = http.createServer(function(request, response){
var parsedUrl = url.parse(request.url, true)
var pathWithQuery = request.url
var queryString = ''
if(pathWithQuery.indexOf('?') >= 0){ queryString = pathWithQuery.substring(pathWithQuery.indexOf('?')) }
var path = parsedUrl.pathname
var query = parsedUrl.query
var method = request.method
/******** 从这里开始看，上面不要看 ************/
console.log('存在监听' + pathWithQuery)
if(path === '/'){ // 如果用户请求的是 / 路径
var string = fs.readFileSync('index.html','utf8') // 就读取 index.html 的内容
response.setHeader('Content-Type', 'text/html;charset=utf-8') // 设置响应头 Content-Type
response.write(string) // 设置响应消息体
response.end()
}else if(path==='/xxxx'){
response.statusCode=200
response.setHeader('Content-Type','text/json;charset=utf-8')
// response.setHeader('Acess-Control-Allow-Origin','http://stu.con:8002')
response.write(`
{
"note":{
"to":"你",
"from":"我",
"heading":"见面了",
"content":"hi"
}
}
`)
response.end()
}else{
response.statusCode = 404
response.setHeader('Content-Type', 'text/html;charset=utf-8')
response.write('呜呜呜')
response.end()
}
/******** 代码结束，下面不要看 ************/
})
server.listen(port)
console.log('监听 ' + port + ' 成功\n请用在空中转体720度然后用电饭煲打开 http://localhost:' + port)
以上为简单的后端服务代码
以下为前端的请求代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首页</title>
</head>
<body>
<button id="button">点我</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
button.addEventListener('click', (e)=>{
let request=new XMLHttpRequest()
request.open('get','/xxxx')//配置request
request.send()
request.onreadystatechange=()=>{
if (request.readyState===4) {
console.log('请求响应完毕了')
console.log(request.status)
if(request.status>=200&&request.status<300){
console.log('说明请求成功')
console.log(typeof request.responseText)
console.log(request.responseText)
let string=request.responseText
let object=JSON.parse(request.responseText)
console.log(typeof object)
console.log(object)
console.log('object.note')
console.log(object.note)
}else if(request.status>400){
console.log('说明请求失败')
}
}
}
})
</script>
</body>
</html>
