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


Posted in Javascript onJuly 25, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
MockJs结合json-server模拟后台数据
Aug 26 #Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 #Javascript
mock.js模拟前后台交互
Jul 25 #Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 #Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 #Javascript
vue使用代理解决请求跨域问题详解
Jul 24 #Javascript
Vue父组件如何获取子组件中的变量
Jul 24 #Javascript
You might like
十天学会php之第九天
2006/10/09 PHP
杏林同学录(七)
2006/10/09 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
IE 当eval遇上function的处理
2011/08/09 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
跟老齐学Python之模块的加载
2014/10/24 Python
python实现飞机大战游戏
2020/10/26 Python
django orm模块中的 is_delete用法
2020/05/20 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
Linux如何压缩可执行文件
2014/03/27 面试题
十佳教师事迹材料
2014/01/11 职场文书
竞职演讲稿范文
2014/01/11 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
主要领导对照检查材料
2014/08/26 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
行政主管岗位职责
2015/02/03 职场文书
奖金申请报告模板
2015/05/15 职场文书
组织委员竞选稿
2015/11/21 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python
Selenium浏览器自动化如何上传文件
2022/04/06 Python
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL