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必备 api中英文对照的chm手册 下载
May 03 Javascript
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
layui table设置前台过滤转义等方法
Aug 17 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
JavaScript基本对象
2007/01/11 Javascript
javascript 常用关键字列表集合
2007/12/04 Javascript
Prototype Hash对象 学习
2009/07/19 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
人力资源专业推荐信
2013/11/29 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
预备党员表决心书
2014/03/11 职场文书
优秀创业计划书分享
2019/07/19 职场文书
新手入门Mysql--sql执行过程
2021/06/20 MySQL
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL