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 相关文章推荐
一个不错的用JavaScript实现的UBB编码函数
Mar 09 Javascript
javascript document.execCommand() 常用解析
Dec 14 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
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下载文件超时时间的设置方法
2016/10/06 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
烹调加工管理制度
2014/02/04 职场文书
建筑安全生产责任书
2014/07/22 职场文书
交通安全横幅标语
2014/10/07 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
初中美术教学反思
2016/02/17 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫