ajax之向服务器发请求并接收响应
一在介绍ajax请求之前先介绍一点DOM的简易操作
由于在html5中用form标签发送请求时,form表单有自动收集整理数据的功能(通过name属性)
使用ajax,就不用form表单了,所以就失去了自动收集整理数据的能力(即不用name)
我们需要手动写代码收集数据--------dom操作
我们知道javascript完整的构成是有:
1.js核心:ES6 2.dom Document Object Model 文档对象模型(js操作页面元素) 3.bom browser Object Model 浏览器对象模型 (js操作浏览器) |
我要介绍的便是其中的dom
注意:本博客中的方法以及对象调用以及异步的创建都是在HTML中的script标签(中的function)中进行
如何使用dom呢?步骤如下
①编写事件 ②获取元素对象 ③通过对象调用属性 |
①这里简单介绍几个事件
onclick 单击事件,用户单击元素,激活事件,调用对应js onload 只能写给body元素。页面加载事件,网页F5或者加载时激活事件,调用对应js onfocus 获取焦点事件 onblur 失去焦点事件 |
当对应的标签发生对应的事件后调用事件后的函数(或方法)
②获取元素对象有两种方式
(1)需要使用js提供的全局文档对象,调用获取元素的方法
document 这个对象不需要new,直接可以用这个对象代表当前html页面所有元素
通过ID获取元素对象
var obj=document.getElementById("id值");
(2)ES6 规定,可以直接使用元素标签的id,来充当元素对象
但是要注意变量名和id的冲突(即不能用保留字符作为id名称)
js变量名称的规范
a.不能使用关键字 name就是关键字
b.变量名可以包含文本,数字,_ , $
c.不能以数字开头,可以用_和$开头
③通过对象调用属性,步骤二已经获取到对象接下来就可以获取其属性用两种情况
(1)表单元素(操作属性value)
获取输入值 var msg=obj.value;
设置文本框中的值 obj.value="....."
(2)双标签(操作内容区域)
获取内容 var msg=obj.innerHTML
设置内容 obj.innerHTML="......"
二,简单介绍下ajax
1,我们都知道同步Synchronous 即在一个任务进行的过程中,不能开启其它的任务
同步访问:浏览器在向服务器发送请求的时候,浏览器不能做任何其它事情只能等待响应
出现的例子有:浏览器地址栏输入url是同步;a标签跳转页面;form表单发送请求
2,异步Asynchrous即在一个任务进行的过程中,可以执行其它任务
异步访问:浏览器在向服务器发送请求的时候,不用等待响应同时可以操作页面
出现的例子:用户名重复验证,异步;股票软件事实更新数据;百度搜索联想词(只写几个或单个搜索词就出现相关内容)
3,那么什么是ajax呢?
ajax====>Asynchronous javascript and xml 翻译过来就是异步的js 和 xml
其本质是:使用js提供的异步对象异步的向服务器发送请求并接收响应回来的数据
三.接下来介绍ajax连接服务并接收响应是怎么操作的
①创建异步对象var xhr=new XMLHttpRequest();
②创建请求 xhr.open("请求方法","url",isAsyn);
'请求方法与后端的请求方式相同(是get同为get 是post同为post 以此类推)'
'url'为请求的url(后端存在并有相应的响应,注意后端请求方式有不同的url书写格式)
原生http的get |
后端:
r.get("/v1/http_get" var _uname=req.query.uname; var _upwd=req.query.upwd; |
这里的url写法:
`/ajax/v1/http_get?uname=${_uname}&upwd=${_upwd}` 模板字符串的传参通过HTML获取传入 |
restful的get |
后端:
r.get("/v1/restful_get/:uname&:upwd"); var _uname=req.params.uname; var _upwd=req.params.upwd; |
这里的url写法:
`/ajax/v1/restful_get/${_uname}&${_upwd}` |
isAsyn当前这个请求,是否用异步发送,true是,false否
完整写法为xhr.open("get","http://127.0.0.1:8080/ajax/test",true);
③发送请求 xhr.send(formdata); 请求主体post/put有请求主体
get/delete没有请求主体,没有请求主体的时候参数可以不填/null
④接收响应
创建监听xhr.onreadystatechange=function(){}
监听的是xhr.readyState属性,保存着当前请求的5个状态
取值 0:请求尚未初始化
1:已经打开服务器连接,请求正在发送
2:开始接收响应头信息
3:开始接收响应主体
4:接收响应完毕
我们接收响应需要第4遍,只接收正确的响应(若要得到每一遍的状态值步骤④需要在步骤①之后进行)
响应成功状态码 200 xhr.status==200
响应数据自动保存在xhr.responseText中,在正确的位置获取就可以了
完整写法为:xhr.onreadystatechange=function(){
//筛选出第4遍,响应状态是200
if(xhr.readyState==4 && xhr.status==200){
//响应自动保存在xhr.responseText中,在正确的位置取出
var r=xhr.responseText;
//这里插入个小知识点:(
后台的对象,通过响应传递给前台,会自动变成string
而且这个string的格式与obj的格式一样,只是添加了一对" 引号"
javascript object notation js对象显示法
这种字符串叫做json串,终归只是一个字符串,不能用for循环直接操作
json串转换为obj的过程,称为json解析
JSON.parse(json串); 前提是json串在响应之前本质是一个对象可以通过JSON.parse()解析还原)
console.log(r);
}
}
上面的方法适用于get和delete方法的请求 关键在于对应的url请求方式一致
补充:.restful的post和put
与上面的方法大都一致只是
①前后台的方法名称要对应上
②前台要设置请求主体,把参数放入请求主体中
var formdata=`uname=${_uname}&upwd=${_upwd}`;
③请求发送的时候,把请求主体当做参数传递出去
xhr.send(formdata);
④要在发送之前设置请求头信息中,请求主体的格式。设置成允许传递任意字符
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
要设置在open和send之间
⑤后台要使用req.body接收参数
四,盘点一些小知识点
(1)在script中的function里执行完函数(如登录等)跳转到其他页面可以用
location.href='同目录下的html文件名/跳转的URLl'
(2)在script中的function中模板字符串中执行其他函数可以用
<a href="javascript:del(${i})">删除</a> //a标签为模板字符串的内容 JavaScript 为固定写法 del为函数 i 为引用的外部参数
(3) 模板字符串<a href="phoneInfoUpdate.html?pid=${i}">修改</a> 执行跳转的时候同时传递本地的参数 i 跳转后获取参数的方式:
在跳转其他HTML中的函数里获取传递来的参数
var obj = new URLSearchParams(location.search) //获取到串来的url
var u_id = obj.get('pid') // 通过对象得到传递来的参数
如get请求的写法:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.status==200 && xhr.readyState==4){
var r = xhr.responseText;
if(r==1){
alert('登录成功!')
location.href='phoneInfoList.html'
}else{
alert('用户名或密码错误!');
upwd.value='';
}
}
}
xhr.open('get',`/v1/user/login/${_uname}&${_upwd}`,true);
xhr.send();
}
如post请求的写法
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var xhr = new XMLHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.status==200 && xhr.readyState==4){ var r= xhr.responseText; if(r==1){ alert('添加信息成功!'); location.href='/phoneInfoList.html'; }else{ alert('添加信息失败') } } } xhr.open('post',`/v1/pinfo/add`,true); var formdata = `pname=${_pname}&page=${_page}&email=${_email}&phone_number=${_phone_number}&sex=${_sex}` xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); xhr.send(formdata); }
学习css基础https://www.cnblogs.com/CIBud/p/14253817.html