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 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
vue2中使用less简易教程
Mar 27 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 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可变函数的使用详解
2013/06/14 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
document.compatMode介绍
2009/05/21 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
python list使用示例 list中找连续的数字
2014/01/27 Python
python访问sqlserver示例
2014/02/10 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
python用插值法绘制平滑曲线
2021/02/19 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
使用python实现学生信息管理系统
2021/02/25 Python
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
应届毕业生如何写求职信
2014/02/16 职场文书
推广普通话演讲稿
2014/05/23 职场文书
春节超市活动方案
2014/08/14 职场文书
四风自我剖析材料
2014/09/30 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
Python办公自动化PPT批量转换操作
2021/09/15 Python