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

2024-10-26 07:38:36

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时才能获取到！

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

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
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
详解JavaScript for循环中发送AJAX请求问题

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

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

一.总结一句话总结:传参数去后台,用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是直接下载相关文件按照以前的方法来操作的后来发现安装好以后似乎用起来更便利,然后就开始琢磨着怎么搭起框架来,下面是过程: 安装 1. 安装nodejs 直接网上找下载就好 2.安装淘宝镜像打开命令行输入 npm install -g cnpm --registry= https://registry.npm.taobao.org 3.安装webpack cnpm install webpack -g 4.在你想要新建项目的路径下新建文件夹用于存放项目文件 cd 进入你
基于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的gzip压缩配置五.Nginx自动列目录配置一.Nginx虚拟主机的配置虚拟主机:通常情况下,为了使每个服务器可以供更多用户使用,可以将一个服务器分为很多虚拟的子服务器,每个子服务器都是互相独立的.这些服务器是根据虚拟化技术分出来的,这样,一台服务器就可以虚拟成很多台子服务器.我们把子服务器叫做虚拟主机.我们搭建好Nginx服务器之后,此时只有一台Nginx服务器,这时如果我们对这台服务器进行虚拟主
基于迁移学习的JS目标检测器构建过程详解

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

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

相关推荐

随机推荐