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