ajax

ajax

跨域

跨域：http 协议 域名 端口

三者只要有一个不同，就是跨域

服务端解决跨域： res.setHeader('Access-Control-Allow-Origin','*')

客户端 request

客户端 request 请求三部分 请求行 请求头 请求体

请求行

req

method  path  http version

请求头

Host 主机名

Connection 链接状态

User-Agent 客户端软件环境

Accept 接受响应类型

Accept-Encoding 接受的数据压缩格式

Accept-Language 客户端语言格式

Cookie 数据载体

请求体

name=liwenli&id=10

服务端 response

服务端 response 响应三部分 响应行 响应头 响应体

响应行

http version  状态码 状态语

响应头

Server 服务名称

Date 响应时间

Content-Type 响应内容mime类型 字符编码格式 默认text/html

Transfer-Encoding 传输编码格式 chunked 分段传输

Connection 链接状态

Cache-Control 缓存控制

Content-Encoding 压缩格式

Set-Cookie 设置cookie

响应体 响应回送的内容

sever词汇 同步异步

解析url路径 url.pars

url.parse（req.url,true）解析路径 如果是true的话，返回的是键值队

query: { name: 'zhufeng', id: '2' },

pathname是url路径

query 查询问号后面的参数

创建sever

createServer 创建一个sever

res.setHeader()设置响应头类型信息 （text/css text/html ）

var result=fs.readFileSyn（'.index/html'） 获取文件路径

res.end('') 结束响应，并返回给客户端

req.url 客户端请求路径

如果请求资源不存在

如果请求资源不存在 返回404

res.statusCode = 404;

res.end('404 NOT FOUND!')

ajax获取数据

注释：AJAX在不加载网页的情况下，更新部分数据

1:

创建对象 XML

var xml=new XMLHTTPRequest();

实例创建，后续所有的操作，都用该对象上的属性

2：

打开地址xml.open()

@param1:请求方式get post delete head put---->method请求方式

@param2:请求地址 接口url

@param3:同步false/异步true  sync/async

xml.open('git','data.txt',false)

3：

响应请求

@param1:readyState 请求状态

@param2:status http状态码

xml.onreadystatechange=function(){

if(xml.readyState==4&&/2\d{2}/.test(xml.status)){ 监听状态

data=xml.responseText 数据存储在這个里面

}

}

4:xml.send();发送请求

5：回掉函数

typeof  callback=='function'?callback(data):null;

method请求方式

method设置请求的方式

> GET系列 问号传参  传递的服务器的内容有大小限制 谷歌8KB、火狐7KB、IE2KB

> - get  获取

> - delete 删除

> - head 只获取服务器响应头信息

>

> POST系列 设置请求主体

> - post  给后端推送数据

> - put 更新服务端数据

jquery ajax获取数据

数据获取

$.ajax

$.ajax({

type:'GET',//请求方式 ‘POST’ JSONP（跨域请求） 1.9以下版本mothod用這个

url:'www.baidu.com', //请求url地址，请求接口地址

dataType:'json'//返回的数据类型

async:false//是否异步

cache:true// 默认是否缓存 true缓存

context:window 指定success里面上下文

beforeSend:function(){

发送请求之前 触发

}

data:form.serialize(),//表单序列化

jsonp:'',//重写jsonp的请求 url中回调函数 key的名字

jsonpCallback:'',//制定jsonp回掉函数的名称                        value名字

data:{

查询参数，向后台发送数据（url?wd=liwenli&uid=1）

wd:'liwenli',

uid:1

}

success:function(val){//成功之后返回数据

this.data=val

}

timerout:3000//3秒以后终止请求 超时时间/原生xhr.timeout触发的是xhr.ontimeout=function(){}

error:function(res){ 请求出错 404不会被触发，请求超时的时候，会报错

}

complete:function(xhr){

不管提交成功或者失败，都会执行

}

})

HTTP网络状态码

服务器响应状态码(HTTP网络状态码):

> 200 成功

> 3xx 重定向

> 301 永久重定向(永久转移)

> 302 临时重定向(临时转移)  服务器负载均衡

> 303 查看其他位置

> 304 读取缓存数据(对于不经常改变的CSS/JS等文件,我们可以做304缓存)

> 4xx 请求错误

> 400 传递参数有误 客户端错误

> 401 没权限

> 403 禁止 服务器拒绝请求

> 404 找不到

> 5xx 服务器错误

> 500 未知的服务器错误

> 503 服务器超负载

AJAX的各种状态

AJAX的各种状态

> xhr.readyState

> 0 uninitialized 未初始化，创建了ajax对象，但是没有调用open方法的时候；

> 1 loading 调用open方法，准备发送请求；

> 2 loaded 发送请求后，完全接收响应信息，开始准备解析；

> 3 interactive 交互，将响应回来的原始数据解析为客户端可以调用的数据,挂载到xhr.responseText  xhr.responseXML中等

> 4 done 响应完成，客户端可以调用，并且http status是200