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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
js 函数调用模式小结
Dec 26 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
CSS常用网站布局实例
2008/04/03 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
初始Nodejs
2014/11/08 NodeJs
javascript操作select元素实例分析
2015/03/27 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
Python标准库sched模块使用指南
2017/07/06 Python
python实现决策树
2017/12/21 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
python try 异常处理(史上最全)
2019/03/07 Python
python将字符串转换成json的方法小结
2019/07/09 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
计算机网络专业求职信
2014/06/05 职场文书
银行求职自荐信范文
2015/03/04 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
Nginx报404错误的详细解决方法
2022/07/23 Servers