Ajax请求
----------------------------------------
1.什么是ajax
1.1 ajax即'asynchronous javascript and xml'(异步javascript 和 xml(xml一般为配置文件))
1.2 传统的网页(不需要ajax)如果需要更新内容,必须重载整个页面
1.3 ajax可以通过在浏览器后台与服务器进行少量数据交换,实现网页的异步更新(即可以在不重新加载整个网页的情况下,对网页的某个部分进行更新)
2.为什么要使用ajax
1.在不刷新页面的情况下可以实现页面更新
2.可以进行一步请求
3.可以让客户端和服务端负载平衡
------------------
3.原生ajax请求(使用 XMLHttpRequest 对象)
3.1 创建ajax核心对象
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
//兼容低版本ie
var xhr = new ActiveXObject("Miscrosoft.XMLHTTP");
}
3.2 给ajax核心对象绑定一个监听http请求的事件
3.2.1 判断http请求状态
readyState : HTTP请求状态
0: 初始化状态
1: 初始化完成 但是没有请求
2: 请求已经发送 但是没有收到响应
3: 收到了响应 但是数据不完整
4: 响应完成
3.2.2 判断服务器返回状态
state属性:
200 响应成功
404 没有在服务器端找到这个页面
304 如果服务器没有修改该文件,则服务器不在发送请求
xhr.onreadystatechange=function{
if(xhr.readyState == 4){
if(xhr.status == 200){
//代表服务器成功响应
}else if(xhr.status == 404){
//代表没有找到页面
}
}
}
3.3 xhr.open(参数一,参数二,参数三); http请求参数初始化
参数一为请求方式 参数二请求地址 参数三为是否异步
3.4 发送http请求
xhr.send();
4 ajax请求传递参数
4.1 ajax请求传递参数的时候是模拟表单进行请求的
4.2 请求参数的形式为字符串键值对形式
4.3 get请求参数是附加在请求的url后面的(url协议)
GET方法中的信息无法保密和数据量太小
因为GET方法提交的数据是作为URL请求的一部分进行数据提交
get请求和post请求
① get方式
把open方法的第一个参数设置为"GET"
把要传递的参数存放在第二个参数中 以键值对和&连接起来
② post方式
设置open方法的第一个参数为"post"
传递参数分三种情况
1. 传递键值对的字符串时候,没有设置请求头
# 即请求头类型为text/plain
1. 参数采用可读流的形式拿到
2. 但是不能够以第三方模块body-parser拿到参数
2. 传递键值对字符串的时候,设置content-type为application/x-www-form-urlencoded
1. 参数采用可读流
2. 能够以第三方模块body-parser拿到参数
此时需要使用中间件 bodyParser.urlencoded({extended:false})
3. 传递json字符串的时候,设置content-type为application/json
1. 参数采用可读流
注意:
1.在进行ajax请求时候,传递参数的时候以字符串的形式传递过去,如果要传递对象,要先转换为json字符串。 JSON.stringify(obj); 同时设置请求头为application/json
2. application/json 和 application/x-www-form-urlencoded 的区别
前者可以传递的数据量比后者要大得多
5. json和 普通数组 对象 在javascript 和如何相互转换
普通字符串 json字符串和json对象三者的区别;
1.普通字符串
是使用单引号或双引号括起来的一串字符。
2.json对象
JSON对象,指的是符合JSON格式要求的JavaScript对象。
3.json字符串
就是在json对象外面加一对单引号字符串
什么是json?
json是用来处理数据的一种格式 xml也可以
json大部分都是用来处理javascript和web服务器端之间的数据交换
json对象结构
对象结构
数组结构
在 javascript 中json字符串和普通对象数组如何转换
JSON.stringify() 将普通对象或者json对象转换为json字符串
JSON.parse() 将json字符串转换为json对象