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 相关文章推荐
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
codeigniter数据库操作函数汇总
2014/06/12 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
解决vue props 拿不到值的问题
2018/09/11 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
前端性能优化建议
2020/09/17 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
python简单商城购物车实例代码
2018/03/15 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
AC Lens:购买隐形眼镜
2017/02/26 全球购物
百丽国际旗下购物网站:优购
2017/02/28 全球购物
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
给学校建议书范文
2014/05/13 职场文书
项目建议书怎么写
2014/05/15 职场文书
无毒社区工作方案
2014/05/23 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
2015年项目工作总结
2015/04/29 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书