首先创建XMLHttpRequest对象，利用此对象发送请求

主页面

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用Ajax</title>

<script type="text/javascript">

function vote(){

    //XmlHttpRequest对象，一个专门的HTTP请求工具

    /*

    实现Ajax要考虑的内容：

    1，用什么请求方式

    2，请求哪个资源(url)

    3，同步还是异步

    */

    var xhr=new XMLHttpRequest();

    // document.write(xhr);

    // alert(xhr);

    // console.log(xhr);//在IE10以下版本console未定义

    //单向请求

    xhr.open('GET','./01.php',true);//打开连接

    //请求方法，请求地址，同步还是异步

    xhr.send(null);//发送请求，不发送数据

    alert(xhr.responseText);

    alert("hello");

}

</script>

</head>

<body>

    <form action="" method="post">

        <p>用户名:<input type="text" name="username"/></p>

        <p>密码:<input type="password" name="pwd"/></p>

        <p><input type="submit" value="注册" onclick="vote()"/></p>

    </form>

</body>

</html>

返回值为01.php中echo的内容

同步与异步的理解

等待send()执行完毕之后，再执行后面的语句为同步  false

不等带send()的是否执行，直接执行后面的语句为异步 true


xhr对象在请求和响应过程中，状态会不断变化，1-4逐步变化，到4时，表示成功

可以绑定一个函数，来监听状态的改变，最终实现接收最后响应信息

添加以下代码，用异步传输

//状态变化的回调函数

    xhr.onreadystatechange=function(){

        if(xhr.readyState==4){

            alert("请求成功了");

            alert(xhr.responseText);//弹出返回信息,responseText是属性不是方法

        }

    }

ajax发送请求的更多相关文章

  1. ajax发送请求跨域 - uri java代理

    问题:ajax发送请求出现cors跨域 解决办法:可以通过java代理的方式,后台发送请求 1.get请求 public void proxyGet(String url) { try { URL r ...

  2. Ajax发送请求等待时弹出模态框等待提示

    主要的代码分为两块,一个是CSS定义模态框,另一个是在Ajax中弹出模态框. 查看菜鸟教程中的模态框教程demo,http://www.runoob.com/try/try.php?filename= ...

  3. Ajax - 发送请求原理

    1,什么是ajax? Asynchronous JavaScript and XML(当然现在xml已经由json代替): 主要是用于前后台的交互(表单提交已经被废弃): 使用场景:前台获取数据.表单 ...

  4. ajax对象。同步与异步及ajax发送请求

    ajax对象的属性.方法 属性 readyState: Ajax状态码 * 0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法 1:表示对象已初始化,但未发送,调用了 ...

  5. Django——Ajax发送请求验证用户名是否被注册

    场景: 用户注册的时候,输入用户名之后,Ajax发送请求到后端,后端验证该用户名是否已经被注册,然后返回到注册页面提示用户. 1.模型: from django.db import models cl ...

  6. 原生Ajax发送请求

    ajax  get&post 1.使用get发送请求,会有请求缓存 1)什么叫请求缓存,请求信息相同浏览器不会再向服务器发送请求,导致访问服务器失败. 2)解决:将随机数添加到请求路径后面参数 ...

  7. angularjs --- ngResource 类似于 ajax发送请求。

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  8. Ajax发送请求的四个步骤

    1.创建XMLHttpRequest let xhr=new XMLHttpRequest; 2.连接服务器 xhr.open("get","goods.json&quo ...

  9. flask ajax发送请求返回400

    在flaskWTF使用csrf保护后,一般提交form表单都需要一个隐藏的csrf 这样可以成功提交,但是使用ajax提交时就不能成功提交,会返回400错误,服务器无法理解请求,这样就需要新的方法解决 ...

随机推荐

  1. 45种Javascript技巧大全(转)

      6.小心使用typeof.instanceof和constructor typeof:不要忘了typeof null返回object,而大多数对象,typeof(Array, Date, and ...

  2. leetcode@ [211] Add and Search Word - Data structure design

    https://leetcode.com/problems/add-and-search-word-data-structure-design/ 本题是在Trie树进行dfs+backtracking ...

  3. HDU-4616 Game 树形DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4616 比较典型的树形DP题目,f[u][j][k]表示以点u为子树,经过 j 个陷阱的最大值,其中k= ...

  4. HDU5739-Fantasia（tarjan求割点）

    题意:给一个无向图n个点1~n,m条边,sigma(i*zi)%(1e9+7).zi是这个图删掉i点之后的价值.一个图的价值是所有连通子图的价值之和,连通图的价值是每个点的乘积. 题解:讲道理这题不算 ...

  5. 集合框架工具类--Collections排序

    package ToolCollectionsDemo; import java.util.ArrayList; import java.util.Collections; import java.u ...

  6. HTML中noscript的用法

    noscript 元素用来定义在脚本未被执行时的替代内容(文本).此标签可被用于可识别 <script> 元素用来定义在脚本未被执行时的替代内容(文本). 标签但无法支持其中的脚本的浏览器 ...

  7. [五]SpringMvc学习-Restful风格实现

    1.Restful风格的资源URL 无后缀资源的访问(csdn用法) 2.SpringMvc对Rest风格的支持 2.1将 /*.do改为/ 2.2 3.@PathVariable获取Url变量 @R ...

  8. 表单，css

  9. 《Effect Java》 归纳总结

    目录: 一.创建和销毁对象 (1 ~ 7) 二.对于所有对象都通用的方法 (8 ~ 12) 三.类和接口 (13 ~ 22) 四.泛型 (23 ~ 29) 五.枚举和注解 (30 ~ 37) 六.方法 ...

  10. Uploadify 3.2 参数属性、事件、方法函数详解

    一.属性 属性名称 默认值 说明 auto true 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 . buttonClass ” 按钮样式 buttonCursor ‘ ...