AJAX (异步 javascript 和 xml)

奈君
189 阅读4分钟 
用 form 可以发请求，但是会刷新页面或新开页面
用 a 可以发 get 请求，但是也会刷新页面或新开页面
用 img 可以发 get 请求，但是只能以图片的形式展示
用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
用 script 可以发 get 请求，但是只能以脚本的形式运行


'AJAX'
使用 XMLHttpRequest 发请求
服务器返回 XML 格式的字符串
JS 解析 XML，并更新局部页面

微软的突破

IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求。 随后 Mozilla、 Safari、 Opera 也跟进（抄袭）了，取名 XMLHttpRequest，并被纳入 W3C 规范

XMLHttpRequest

  • XMLHttpRequest 是 window下的一个全局对象

例子

  if(path === '/'){     //  '如果路径是 /'
    // '就同步读取当前路径下的index.html  格式utf8'
    var string=fs.readFileSync('./index.html','utf8')
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    
    //'对应同步读取的文件'
    response.write(string)
    response.end()
  }else{
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write('1111')
    response.end()
  }

当向服务器请求 main.js

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button id="myButton"></button>
</body>
</html>

server.js

  if(path === '/'){
    var string=fs.readFileSync('./index.html','utf8')
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(string)
    response.end()
    
    //'重点' 
  }else if (path === '/main.js') {
    var string=fs.readFileSync('./main.js','utf8')
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
    response.write(string)
    response.end()
  }else{
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write('呜呜呜')
    response.end()
  }

main.js
myButton.addEventListener('click',()=>{
	//创建一个对象 初始化他 发送他
	let request= new XMLHttpRequest()
	request.open('POST','/xxx')  // 配置 request  第三个参数 就是是否异步  是个布尔值
	request.send()
})

效果

当点击 巴腾

因为我server.js 文件还没有配置 /xxx 所以404

查看xxx的请求方式

//'只要修改main.js 内的 request.open('POST','/xxx') 即可以改变请求方式 PUT DELET 但是如果乱写 服务器是不会接受的'

我们响应下 /xxx (去配置下server.js)

  if(path === '/'){
    var string=fs.readFileSync('./index.html','utf8')
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(string)
    response.end()
  }else if (path === '/main.js') {
    var string=fs.readFileSync('./main.js','utf8')
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
    response.write(string)
    response.end() 
    //'重点'
  }else if(path==='/xxx'){
        response.statusCode = 200
        response.setHeader('Content-Type','text/html')
        response.write(
              `
              <?xml version='1.0' encoding="utf-8"?>
              <note>
              <to>George</to>
              <from>John</from>
              <heading>Reminder</heading>
              <body>Don't forget the meeting!</body>
              </note>
              ` 
          )

        response.end()
  }else{
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write('呜呜呜')
    response.end()
  }

页面返回

######################################################

查看下请求

main.js 

myButton.addEventListener('click',()=>{
	//创建一个对象 初始化他 发送他
	let request= new XMLHttpRequest()
	request.open('post','/xxx')  // 配置 request  第三个参数 就是是否异步  是个布尔值
	request.send()
	console.log(request)  //'打印出请求'
})

监听下 readyState 事件 「状态」

myButton.addEventListener('click',()=>{
	//创建一个对象 初始化他 发送他
	let request= new XMLHttpRequest()
	request.open('POST','/xxx')  // 配置 request  第三个参数 就是是否异步  是个布尔值
	request.send()
    //'每秒查看下 请求状态'
	setInterval( ()=>{
		console.log(request.readyState)
	},1)
	
})

根据时间的推移 返回的状态也不一样

状态码 「逐个进过的 2 3 很快」

main.js
myButton.addEventListener('click',()=>{
	//创建一个对象 初始化他 发送他
	let request= new XMLHttpRequest()
	//'语句位置尽量往上写   注意大小写'
	request.onreadystatechange = ()=>{
	console.log(request.readyState)
	}
	request.open('POST','/xxx')  // 配置 request  第三个参数 就是是否异步  是个布尔值
	
	
	request.send()	
})

返回状态

根据请求响应状态吗 判断加载码

myButton.addEventListener('click',()=>{ //创建一个对象 初始化他 发送他 let request= new XMLHttpRequest()

request.onreadystatechange = ()=>{
	if (request.readyState===4) {
		console.log( '请求响应完成')

		if(request.status>=200){
			console.log( '请求成功')
		}else if(request.status>=400){
			console.log('请求失败')	
		}
	}
}
request.open('POST','/xxx')  // 配置 request  第三个参数 就是是否异步  是个布尔值


request.send()

})

###############################

JSON

JSON vs Javascript

  1. JSON没有抄袭 javascript的 function undefined
  2. JSON 的字符串首尾必须是" "
    'json'          'javascript'
     没有            undefined  
     null               null
    ["a","b"]         ['a','b']      
    ["name":"jack"]    [name:'jack']
    "jack"              'jack'
    没有                var a={} 
                        a.self=a
    没有原型链         {_proto_}                                   
                        

main.js
myButton.addEventListener('click',()=>{
	//创建一个对象 初始化他 发送他
	let request= new XMLHttpRequest()

	request.onreadystatechange = ()=>{
		if (request.readyState===4) {
			console.log( '请求响应完成')

			if(request.status>=200 && request.status<=300){
				console.log( '请求成功')
				console.log( request.responseText)
				console.log(typeof request.responseText)
				let string=request.responseText

				//把符合 JSON语法的字符串
				//转换成 js对应的值
				let object=window.JSON.parse(string)
				//JSON.parse 是浏览器提供的
				console.log(object)
				

			}else if(request.status>=400){
				console.log('请求失败')	
			}
		}
	}
	request.open('POST','/xxx')  // 配置 request  第三个参数 就是是否异步  是个布尔值
	
	
	request.send()	
})



server.js

if(path === '/'){
    var string=fs.readFileSync('./index.html','utf8')
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(string)
    response.end()
  }else if (path === '/main.js') {
    var string=fs.readFileSync('./main.js','utf8')
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
    response.write(string)
    response.end() 
  }else if(path==='/xxx'){
        response.statusCode = 200
        response.setHeader('Content-Type','text/json;charset=utf-8')
        response.write(
              `
             { 
                "note":{
                  "to":"Tove",
                  "from":"china",
                  "heading":"hello",
                  "content":"word",
                  "这返回的只是字符串":"只是刚刚符合json语法"
                }
              } 
          
              ` 
          )

        response.end()
  }else{
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write('呜呜呜')
    response.end()
  }

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 <button id="myButton">巴腾</button>
</body>
<script  src="./main.js"></script>
</html>

同源

同端口

同协议

同域名

CORS

 if(path === '/'){
   var string=fs.readFileSync('./index.html','utf8')
   response.statusCode = 200
   response.setHeader('Content-Type', 'text/html;charset=utf-8')
   response.write(string)
   response.end()
 }else if (path === '/main.js') {
   var string=fs.readFileSync('./main.js','utf8')
   response.statusCode = 200
   response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
   response.write(string)
   response.end() 
 }else if(path==='/xxx'){
       response.statusCode = 200
       response.setHeader('Content-Type','text/json;charset=utf-8')
       //'cors '
       response.setHeader('access-Control-Allow-Origin','*')
       response.write(
             `
            { 
               "note":{
                 "to":"Tove",
                 "from":"china",
                 "heading":"hello",
                 "content":"word",
                 "这返回的只是字符串":"只是刚刚符合json语法"
               }
             } 
         
             ` 
         )

       response.end()
 }else{
   response.statusCode = 404
   response.setHeader('Content-Type', 'text/html;charset=utf-8')
   response.write('呜呜呜')
   response.end()
 }
avatar
文章
阅读
粉丝