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 操作DOM的基本用法分享
Apr 05 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
Preload基础使用方法详解
Feb 03 Javascript
如何利用vue实现波谱拟合详解
Nov 05 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防盗链的常用方法小结
2010/07/02 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
Display SQL Server Login Mode
2007/06/21 Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
python中类的一些方法分析
2014/09/25 Python
详解python开发环境搭建
2016/12/16 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
python生成二维码的实例详解
2017/10/29 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Python 去除字符串中指定字符串
2020/03/05 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
幼儿园大班区域活动总结
2014/07/09 职场文书
开天辟地观后感
2015/06/09 职场文书
婚礼父母致辞
2015/07/28 职场文书
《刷子李》教学反思
2016/02/20 职场文书
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python