ajax
前言:
常见Windows命令:
- windows+E 打开文件资源管理
- Windows+D 回到桌面
- ctrl+alt+. ctrl+alt+delete 打开任务管理器
- windows+R 打开运行界面 cmd—>打开命令行工具
- ctral+A ctrl+C ctrl+V ctrl+Z ctrl +S
常见dos命令:
- cd 地址 切换目录
- dir 查看当前目录下所有文件
- cls 清屏
- exit 退出
- ipconfig 查看本机IP地址
- node 文件名 部署服务器
一、ajax的概念
异步和同步:
- 同步:浏览器在请求数据的过程中,会一直等待事件的响应,直到返回结果才会执行其他的操作。
- 异步:浏览器在请求数据的过程中,不会一直等待,这段时间还可以做其他的操作
ajax是一种能够完成前后端数据交换的技术
局部刷新技术
请求地址: 协议:主机名:端口号/资源地址?查询参数#哈希
例如:http://localhost:3000 或 http://127.0.0.1:3000
二、使用ajax
简单的ajax请求:
var xhr=new XMLHttpRequest();//创建对象
xhr.open("GET","http://127.0.0.1:3000");//配置
//监听事件
xhr.onreadystatechange=function(){
if(this.readyState==4&&this.status==200){
// console.log(this.responseText);
document.querySelector('div').innerHTML=this.responseText;
}
};
xhr.send();//发送请求
ajax的核心请求对象:XMLHttpRequest
1.方法:
- open(method,url) 配置请求对象
- method
- get
- post
- url: 服务器地址
- method
- send(params) 向后台发送请求
- params post请求的参数
2.事件:
- onreadstatechange 当readyState状态发生改变的时候,就会触发这个事件
3.属性
- readyState XMLHttpRequest(请求)对象的状态
- 1
- 2
- 3
- 4 接收到后台响应,后台响应的数据解析完毕
- responseText 后台响应的 数据(文本格式)
- responseXML 后台响应给前端的数据(XML格式)
- status http状态码 200 (成功) 404 500
4.ajax请求方式:
- GET
- 有参数时,需要将参数拼接到地址后面,例如:http://localhost:3000?key=value&key1=value1
- POST
- 有参数时,需要将参数通过请求体发送
示例1:get请求登录
//登录功能
function login(name, pwd) {
var xhr = new XMLHttpRequest();//创建对象
xhr.open("GET", 'http://localhost:9005?username=' + name + '&password=' + pwd);
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
//{"code":20,"msg":"登陆成功","username":"admin"}
// {"code":40,"msg":"用户名或密码有误"}
var obj = JSON.parse(this.responseText);//将json字符串---->对象
console.log(obj);
}
};
xhr.send();
}
示例2:post 请求登录
function postLogin(name, pwd) {
var prams = "username=" + name + "&pwd=" + pwd;//请求参数
var xhr = new XMLHttpRequest();
xhr.open("POST", 'http://localhost:5000');
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
// console.log(this.responseText);
var obj=JSON.parse(this.responseText);
console.log(obj);
}
};
xhr.send(prams);//请求体 中发送数据
}
GET和POST请求的区别:
- 有参数时,get请求需要将参数拼接到请求地址中,post请求在请求体中发送
- 安全性不一样,post更加安全。…
- 能够传输的数据大小不一样。GET请求由于需要在地址后面拼接提交给服务器的数据,对传输数据的大小是有要求的,最大2K。post是在请求体中发送数据,理论上,没有上限。
5.数据解析
常见的数据格式:
- 普通文本 字符串
- json格式 字符串 注意:json字符串中的key必须使用双引号包裹
- json数组 [{key:value,key:vaue}]
- json对象 {“key”:value,“key”:value}
- xml格式
6. JSON对象
- parse() 将json字符串转换为对象格式
- stringify() 能够将对象转换为json字符串
7.ajax封装
使用回调函数,解决异步传参问题。
/*
method 请求方式 get/post
url: 服务器地址
fn : 回调函数
data: 请求参数
*/
function ajax(method, url,fn, data) {
var xhr = new XMLHttpRequest();//创建对象
if (method == "get" && data != undefined) {//get 携带参数
url = url + "?" + data;
}
xhr.open(method, url);
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
// console.log(this.responseText);//打印后台数据
// return this.responseText;
fn(this.responseText);//将后台数据作为参数传递给函数
}
};
if (method == 'post' && data != undefined) {
xhr.send(data);//post有参数
} else {
xhr.send();//发送
}
}