ajax day1

1、ajax

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

AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

2、创建服务器

var http=require('http')

var fs=require('fs')

http.createServer(function(req,res){//创建服务器

if(req.url=="/test?name=karen&pwd=123&count=20"){

fs.readFile('text.txt',function(err,data){ //text.txt文件设为UTF-8，避免乱码

console.log(data.toString())

res.end(data.toString())

})

//var str='[{"name":"karen","age":"48","content":"xxxxxxx"}, {"name":"karen","age":"48","content":"xxxxxx"}]'

res.end(str)//紫色部分代码的另一种方法

//首页

if(req.url=="/"){

fs.readFile('17072.html',function(err,data){

res.end(data.toString())

})

}

//首页里面的图片

if(req.url=="/15.jpg") {

fs.readFile('15.jpg', function (err, data) {

if (err) {

console.log(err)

}

else {

res.end(data)

}

})

}

}

}).listen(8088,function(){

console.log("开启服务器")

})

3、请求对象的创建

var http;

if(window.XMLHttpRequest){

http=new XMLHttpRequest() //所有现代浏览器请求对象的创建

}else{

http=new ActiveXObject("Microsoft.XMLHTTP")

//老版本的浏览器请求对象的创建（IE5，IE6）

} //浏览器兼容

http.responseXML//如果服务器响应的是xml,就用这个属性

http.responseText//如果服务器响应的是非xml,就用这个

4、发送请求

http.open(method,url,async) //方法 ，url， 异步否

http.send()

GET:

http.open('get','test?name=karen&pwd=123&count=20')

http.send()

//（1）get请求快速、不安全，设计金钱的不用get请求

（2）karen如果写成中文，就要用encodeURI(xxx),避免服务器乱码

（3）在更改数据库数据时，低版IE会因访问到已访问并缓存的网址而访问不到新的网址及更改数据，可用随机数和时间戳来解决这一问题

随机数：

var rand=Math.random()

http.open("get",'test?name=karen&pwd=123&count=20&random='+rand,true)

时间戳：

var dt=new Date()

http.open("get",'test?name=karen&pwd=123&count=20&random='+dt.getTime(),true)

POST:

http.open('POST','ajax3.txt',true)

http.send("name=jack&pwd=123")

//（1）请求不会缓存

（2）传递的的数据不要放在url中，数据放在send（）方法里

（3）要在head中告诉后端发送的数据格式（enctype)

5、监听管道

http.readyState//0:请求没有初始化 1:服务器建立连接 2:请求已接受 3:请求处理ing 4:请求完成,响应已经就绪

http.status//200:"OK" 404:错误

http.onreadystatechange=function(){}//每次当状态改变都会调用这个方法

httpTool.onreadystatechange=function(){ //当得到数据的时候，后端发东西（错误的，正确）过来

console.log(httpTool.readyState)

if(httpTool.readyState==4){

if(httpTool.status==200){

//请求是我想要的正确的数据

}

if(httpTool.status==404){

//请求成功，但不是我们想要的数据

}

}

}

以上绿色部分代码可写为：

if(httpTool.readyState==4&&httpTool.status==200){

console.log(httpTool.responseText)

}

6、数据解析

最直接的办法就是把返回的数据通过字符串的方法各种剪裁然后展示

得到的数据：var person="{name:jack,age:18,info:['html','css','js','php']}"

解析：var name=person.slice(6,10)...

document.get...("name").innerHTML=name...

JSON解析：

//得到数据

http.onreadystatechange=function(){

if(http.readyState==4&&http.status==200){

console.log(http.responseText)

//6.1.数据解析

var dataObj=JSON.parse(http.responseText)

console.log(dataObj)

//6.2.展示

var div=document.querySelector("div")

for(var i=0;i<dataObj.length;i++) {

var name = document.createElement('p')

name.innerHTML = dataObj[0].name

div.appendChild(name)

var age = document.createElement('p')

age.innerHTML = dataObj[0].age

div.appendChild(age)

var content = document.createElement('p')

content.innerHTML = dataObj[0].content

div.appendChild(content)

}

}

}

7.拓展 for in

JavaScript for/in 语句循环遍历对象的属性：

例如：

var person={fname:"John",lname:"Doe",age:25};for (xin person) { txt=txt + person[x]; }