用 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    
        Document复制代码

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.jsmyButton.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(              `              
                  
                  
     
      George
                   
     
      John
                   
     
      Reminder
                   Don't forget the meeting!              
                  `           )        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.jsmyButton.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

JSON没有抄袭 javascript的 function undefined

JSON 的字符串首尾必须是" "

'json'          'javascript'     没有            undefined       null               null    ["a","b"]         ['a','b']          ["name":"jack"]    [name:'jack']    "jack"              'jack'    没有                var a={}                         a.self=a    没有原型链         {_proto_}                                                           复制代码

main.jsmyButton.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.jsif(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    
        Document 复制代码

同源

同端口

同协议

同域名

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() }复制代码