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 相关文章推荐
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
Vue实现图片与文字混输效果
Dec 04 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
浅析JavaScript 函数柯里化
Sep 08 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实现采集程序原理和简单示例代码
2007/03/18 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
js loading加载效果实现代码
2009/11/24 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
Python实现telnet服务器的方法
2015/07/10 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
对于Python深浅拷贝的理解
2019/07/29 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
keras 权重保存和权重载入方式
2020/05/21 Python
pycharm实现猜数游戏
2020/12/07 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
英国在线泳装店:Simply Swim
2019/05/05 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
人力资源行政经理自我评价
2013/10/23 职场文书
师说教学反思
2014/02/07 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
离婚协议书范文2015
2015/01/26 职场文书
地球上的星星观后感
2015/06/02 职场文书
政协常委会议主持词
2015/07/03 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python