首先创建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. Petshop学习第一天

    1.PetShop的体系架构: 2.分层设计的目的: 分散关注.松散耦合.逻辑复用.标准定义 3.一些不明白的地方: item和product是什么关系??? Model类库中的Linq To Sql ...

  2. Android知识点

    下面这段activity的配置可以防止onCreate方法在锁屏或者屏幕旋转时被调用,转而调用onConfigurationChanged方法,避免onCreate重复调用 <activity ...

  3. Java文件合并

    文件分割与合并是一个常见需求,比如:上传大文件时,可以先分割成小块,传到服务器后,再进行合并.很多高大上的分布式文件系统(比如:google的GFS.taobao的TFS)里,也是按block为单位, ...

  4. [OC Foundation框架 - 7] NSArray的创建与遍历

    NSArray是不可变的,不能先创建再添加元素 NSArray可以放入任何OC对象,但不能放入基本数据类型.结构体.枚举等非OC对象 不能存储nil   A.常用方法1 创建 返回用量 是否含有某元素 ...

  5. 使用Dropbox提高个人数据管理效率

    Dropbox 应该大家都不陌生,其在云存储阵营中独树一帜,通俗的说它是提供多终端和云之间的数据同步服务,而就其本质来说它无非是将数据的采集.存储和分发三个关节打通,整合成统一服务对外提供.这就好比只 ...

  6. [置顶] Objective-C ,ios,iphone开发基础:protocol 协议（委托，代理）的声明

    协议是为了弥补Objective-c中类只能单继承的缺陷,在Objective-c2.0之前当一个类遵循一个协议的时候,必须在类中实现协议的所有方法,在Objective-c2.0之后协议中的方法就有 ...

  7. 剑指OFFER之复杂链表的复制（九度OJ1524）

    题目描述: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点). 输入: 输入可能包含多个测试样例,输入以EOF结束.对于每个测试案例,输入的第一 ...

  8. IDF实验室-python ByteCode writeup

    题目地址:http://ctf.idf.cn/index.php?g=game&m=article&a=index&id=45 下载来发现是crackme.pyc 可以用unc ...

  9. hadoop 1.2 集群搭建与环境配置

    一.虚拟机环境 见我的另一篇博客http://www.cnblogs.com/xckk/p/6000881.html, 需要安装JDK环境,centos下安装JDK可参考: http://www.ce ...

  10. 12.1 文档相关 Webbrowser 该文档已被修改，是否保存修改结果

       附件:http://files.cnblogs.com/xe2011/Webbrowser_Document_IsModified.rar   该文档已被修改,是否保存修改结果?是:保存修改结果 ...