js 实现ajax发送步骤过程详解

js发送ajax发送，分步骤进行

ajax的核心 是XMLHttpRequest,

步骤1：创建一个对象xmlrequest，在主流的浏览器都支持new ，

var xmlhttp = new XMLHttpRequest() IE浏览器不支持这种方法，需要再写一个函数来创建

步骤2 ：连接服务端

得到XMLHTTPRequest对象后，就可以调用对象的open（）方法，与服务器连接，参数如下

open（method，url，async）:

  • method:请求方法GET或POST，
  • url：服务器的地址，
  • async :表示异步请求，可以不写，默认是True，
  • xmlhttp.open（"GET“，"/ajax_get/",true）;

步骤3：发送请求

xmlhtto.send(null),有兼容的问题，加上null， null在js中一种数据类型，表示空，

以上3个步骤相当于jquery的

$.ajax({
　　url:"/ajax_get/",
　　type:"GET",
　　success:function(){　　
　　}
　　)}

步骤4：接收服务器响应，

请求发出，服务端开始执行，

XMLHttpRequest对象有一个onreadystatechange事件，

0：初始化外网状态，只创建XMLHttpRequest对象，

1：请求开始，open( )方法调用，

2：请求发送完成状态，send（）方法调用，

3： 开始读取服务器响应，

4：读取服务器响应结束，

onreadystatechange 事件会在状态为1,2,3,4 时引发，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>

<form action="/index/" method="post">

  <p><input type="text">{{ error }}</p>
  <p><input type="text">{{ error }}</p>
  <p><input type="submit"></p>

</form>

<p>用户名：<input type="text" class="user"></p>
<button onclick="send()">ajax</button>

</body>

<script>
{#  给button按钮绑定send事件#}
  function send() {

    var ele = document.getElementsByClassName("user")[0];
    var con = ele.valueOf;

    xmlHttp=new XMLHttpRequest();
    xmlHttp.open("GET","/getajax/",true);
    xmlHttp.send(null);

    {#监听服务端 #}
    xmlHttp.onreadystatechange=function () {
      if (xmlHttp.readyState ==4 && xmlHttp.status ==200){
        alert(xmlHttp.responseText);
        alert(typeof xmlHttp.responseText)

      }
    }

 }通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。需要获取到服务器响应的内容，可以通过XMLHttpRequest对象的responseText得到服务器响应内容。

</script>

</html>

ajax的post请求

<1>需要设置请求头：xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)；注意 :form表单会默认这个键值对不设定，Web服务器会忽略请求体的内容。

<2>在发送时可以指定请求体了：xmlHttp.send(“username=yuan&password=123”)

创建XMLHttpRequest对象；

调用open()方法打开与服务器的连接；

调用send()方法发送请求；

为XMLHttpRequest对象指定onreadystatechange事件函数，这个函数会在

XMLHttpRequest的1、2、3、4，四种状态时被调用；

XMLHttpRequest对象的5种状态，通常我们只关心4状态。

XMLHttpRequest对象的status属性表示服务器状态码，它只有在readyState为4时才能获取到。

XMLHttpRequest对象的responseText属性表示服务器响应内容，它只有在
readyState为4时才能获取到！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解JavaScript for循环中发送AJAX请求问题

    详解JavaScript for循环中发送AJAX请求问题

    首先说,出现这个问题的场景是很少见的,因为有太多更好解决方法.今天搞ajax的时候,一个有趣的地方,,每个迭代中都要发送一个get请求,因为迭代的速度太快,一个请求还没有完成就进行下一个迭代,在chrome和ff上,除最后一个请求外,其它请求都被取消了.所以该怎么办呢?设置延时(不太好)还是其他办法?  办法有很多,比如设置休眠,迭代等等, 我采用的是另外两种解决办法.  一.同步的ajax请求,而ajax请求默认是异步的,所以要设置为false. function creatXMLHttpRe

  • Extjs ajax同步请求时post方式参数发送方式

    ajax同步请求一般下面这样: 复制代码 代码如下: var conn = Ext.lib.Ajax.getConnectionObject().conn; conn.open("POST", 'http://localhost:8080/struts2study/TreeDDGet?node=-1',false); // 这里的conn对象其实就是 xmlHttpRequest 对象. conn.setRequestHeader("Content-Type",&q

  • Javascript发送AJAX请求实例代码

    一个对AJAX的封装 //url就是请求的地址 //successFunc就是一个请求返回成功之后的一个function,有一个参数,参数就是服务器返回的报文体 function ajax(url,successFunc) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open("POST",url,true); xhr.onr

  • jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用. 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据.阅读本文的读者应该具备jQuery.Ajax.PHP相关知识,并能熟练运用. XHTML <ul id="use

  • jsp+ajax发送GET请求的方法

    本文实例讲述了ajax发送GET请求,然后通过jsp页面来接收处理的实现方法.分享给大家供大家参考.具体实现方法如下: Ajax发送GET请求 这里用一个实例演示Ajax发送get请求,实例具体要求为一个注册页面,当用户填写完用户名称时,该输入框失去焦点后会通过Ajax向后台发送验证信息,如果用户名不是admin则通过验证,否则不通过验证. 下面先看JSP页面具体信息: 复制代码 代码如下: <form action="servlet/LoginServlet" method=&

  • js与jQuery终止正在发送的ajax请求的方法

    本文实例讲述了js与jQuery终止正在发送的ajax请求的方法.分享给大家供大家参考,具体如下: 核心:调用XMLHttpRequest对象上的abort方法 jquery的ajax方法有自己的超时时间设置参数: $.ajax({type:'POST', url:'b.php', data:'', timeout:5000, success:function(){ } }) 同时 1. $.get返回的数据类型是XMLHttpRequest,请参考手册.($.post.$.ajax.$.get

  • js 实现ajax发送步骤过程详解

    js发送ajax发送,分步骤进行 ajax的核心 是XMLHttpRequest, 步骤1:创建一个对象xmlrequest,在主流的浏览器都支持new , var xmlhttp = new XMLHttpRequest() IE浏览器不支持这种方法,需要再写一个函数来创建 步骤2 :连接服务端 得到XMLHTTPRequest对象后,就可以调用对象的open()方法,与服务器连接,参数如下 open(method,url,async): method:请求方法GET或POST, url:服务

  • 原生js中ajax访问的实例详解

    原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (

  • Nest.js快速启动API项目过程详解

    目录 快速启动 使用nest自带的命令行工具 直接使用starter项目 用npm安装所需的包 创建controller 创建service 结构和命名 HTTP请求 处理Axios对象 配置 全局添加headers API文档 快速启动 最近上了一个新项目,这个客户管理一个庞大的任务和团队集群,而不同流程所适用的系统也不太一样,比如salesforce,hubspots之类的.这次的新项目需要在另外两个平台之间做一些事情.目前只需要先封装其中之一的API,因此我们选定使用NodeJS的框架Ne

  • js变量值传到php过程详解 将php解析成数据

    js变量值传到php过程详解 将php解析成数据

    一.总结 一句话总结:传参数去后台,用ajax,或者原生js方式拼接url.明白原理,洞悉系统是先解析php,再执行html代码和js代码. 二.用ajax 1. 页面提交数据: ajax 2. php页面获取参数: $val = $_POST['val'] 参考代码(jquery): $.ajax({ type: 'POST', url: 'save.php', data: {val: text1obj.value} success: function(msg){ // msg: php返回内

  • vue.js从安装到搭建过程详解

    vue.js从安装到搭建过程详解

    最初的时候用vue是直接下载相关文件 按照以前的方法来操作的 后来发现安装好以后似乎用起来更便利,然后就开始琢磨着怎么搭起框架来,下面是过程: 安装 1. 安装nodejs 直接网上找下载就好 2.安装淘宝镜像 打开命令行 输入 npm install -g cnpm --registry= https://registry.npm.taobao.org 3.安装webpack cnpm install webpack -g 4.在你想要新建项目的路径下新建文件夹 用于存放项目文件 cd 进入你

  • 基于Node.js搭建hexo博客过程详解

    基于Node.js搭建hexo博客过程详解

    一.安装新版本的nodejs和npm 安装n模块: npm install -g n 升级node.js到最新稳定版 n stable 二.安装hexo note: 参考github,不要去其官网 安装Hexo npm install hexo-cli -g Setup your blog hexo init blemesh cd blemesh 安装Cactus主题,众多开源主题中比较简洁的一个: 主题页 Cactus页 git clone https://github.com/probber

  • Nginx虚拟主机的配置步骤过程全解

    Nginx虚拟主机的配置步骤过程全解

    目录 一.Nginx虚拟主机的配置 二.日志的配置 三.Nginx缓存配置 四.Nginx的gzip压缩配置 五.Nginx自动列目录配置 一.Nginx虚拟主机的配置 虚拟主机:通常情况下,为了使每个服务器可以供更多用户使用,可以将一个服务器分为很多虚拟的子服务器,每个子服务器都是互相独立的.这些服务器是根据虚拟化技术分出来的,这样,一台服务器就可以虚拟成很多台子服务器.我们把子服务器叫做虚拟主机.我们搭建好Nginx服务器之后,此时只有一台Nginx服务器,这时如果我们对这台服务器进行虚拟主

  • 基于迁移学习的JS目标检测器构建过程详解

    目录 正文 步骤一:安装依赖 步骤二:加载预先训练的模型 步骤三:处理图像 步骤四:运行模型 步骤五:显示检测结果 最后 正文 在计算机视觉领域,目标检测是一个非常重要的任务.它可以应用于许多领域,如自动驾驶.安防.医疗等.在本文中,我们将介绍如何使用迁移学习构建一个基于JavaScript的目标检测器. 迁移学习是一种将已训练好的模型应用于新问题的方法.我们可以使用已经训练好的模型作为起点,并在新数据集上进行微调来解决新问题.这种方法可以大大减少模型的训练时间,并获得更好的性能. 在本文中,我

  • Python实现自动化邮件发送过程详解

    Python实现自动化邮件发送过程详解

    使用Python实现自动化邮件发送,可以让你摆脱繁琐的重复性业务,可以节省非常多的时间. 操作前配置(以较为复杂的QQ邮箱举例,其他邮箱操作类似) 单击设置-账号,滑倒下方协议处,开启IMAP/SMTP协议(IMAP,即Internet Message Access Protocol(互联网邮件访问协议),可以通过这种协议从邮件服务器上获取邮件的信息.下载邮件等.IMAP与POP类似,都是一种邮件获取协议.) (ps.开启需要验证) 记住端口号,后续写代码发送邮件时候需要 生成授权码,前期配置完

  • Node.js连接数据库实现过程详解

    目录 创建数据库 mysql 创建数据库 在前面的数据库入门中我们讲解了常用的sql语法以及实战,接下来我们来介绍一下如何在nodejs中使用数据库 在前面的文章中我们有手把手使用docker创建数据库,这里就直接沿用之前创建的数据库 首先启动docker,把之前的mysql容器运行起来 然后登入mysql客户端查看一下现有的数据库,以及user表 mysql 在前面我们已经使用mysql自带的客户端连接数据库进行一些操作, 到了node.js中我们可以用mysql这个npm包来连接mysql数

随机推荐