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请求的写法:

    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请求的写法

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