原生JavaScript异步通讯

作者: Java高级进阶 | 来源:发表于2018-12-13 20:44 被阅读0次

#概念:(Asysnchronous javascript and xml,异步的JavaScript和xml)ajax是一种无须加载网页的情况下能够重新更新部分网页的技术。

异步通讯的过程

#前端

创建XMLhttprequest的请求对象

var $http = new XMLhttprequest();

建立连接

$http.open(method,uri);//methhod表示提交方式,uri表示链接的地址(servlet),

设置readyState的取值变化进行监听的监听函数

$http.onreadyStatechange = function(){

    if($http.readyState===Shttp.DONE){//表示监听到了请求报头的信息

        var text = $http.responseText;//获取服务器传回来的文本数据数据

        //将文本数据转换为对象

        var o = eval("("+text+")");

        //    将数据写到页面上

        //获取页面的标签元素,再向标签中添加数据

        var pp = document.querySelector("选择器");

        pp.innerHTML = o.massage;//必须和服务器上传回的massage一样。

    }

}

如果请求是post,就要设置请求报头

//首先判断是否为post请求

if(method.toLowerCase().trim==="post"){

    //设置请求报头

    $http.setRequestHeader("content-type","application/X-www-form-urlencoded");

}

发送请求

//获取编辑框中的数据

var data = "username="+e.value;//e表示参数,表示自己

$http.send(data);//传递的数据类型为“username=name&password=pass”

#服务端:

接收客服端传递过来的数据

从数据库查询数据,进行比较,如果有数据就提示存在,没有就提示没数据

将字符串传回页面:字符串形式:"“name”:“string”,“succes”:“true”";

设置文本样式:response.setContentType(“text/plain;charset=utf-8”);

response.getWriter().println(String);

 在此我向大家推荐一个架构学习交流群。交流学习群号:938837867 暗号:555 里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化、分布式架构等这些成为架构师必备

相关文章

  • 原生JavaScript异步通讯

    #概念:(Asysnchronous javascript and xml,异步的JavaScript和xml)a...

  • vue学习4

    接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环...

  • Vue接口调用方式

    接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环...

  • JS-Ajax

    全称 Ansync JavaScript and XML,是一门异步的加载技术,局部刷新,Ajax的使用分为原生和...

  • JavaScript异步编程好文摘要

    JavaScript之异步编程简述JavaScript异步编程

  • AJAX

    AJAX:Asynchronous javascript And XML 异步的javascript和xml 异步...

  • 异步通讯

    epoll的作用 监听io流的变化,返回事件。 epoll 操作 创建: epoll_create 注册: epo...

  • ES6 之 Promise

    Promise是JavaScript异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步...

  • ajax:load()加载静态资源

    AJAX = 异步 JavaScript 和 XML (Asynchronous JavaScript ...

  • Ajax

    Asynchronous JavaScript and XML (异步的 JavaScript and XML )...

网友评论

    本文标题:原生JavaScript异步通讯

    本文链接:https://www.haomeiwen.com/subject/rbqihqtx.html