Ajax笔记整理

Ajax是什么

AJAX = Asynchronous JavaScript and XML
ajax即为js通过异步的方式向服务器发送请求并获得响应,从而局部更新网页,提高用户体验。
注意,AJAX只能向同源网址(协议、域名、端口都相同)发出HTTP请求,如果发出跨源请求,就会报错。
具体来说,AJAX包括以下几个步骤。

  • 创建AJAX对象
  • 发出HTTP请求
  • 接收服务器传回的数据
  • 更新网页数据

写法

发送Get请求

var req=new XMLHttpRequest()
req.onreadystatechange=function(){
    if (ajax.readyState == 4) {
        if ((ajax.status >= 200 && ajax.status < 300)|| (ajax.status == 304) ){
            alert(req.responseText)
        }
    }
}
req.open("get","http://www.example.com/somepage.php?id=" + encodeURIComponent(id))
req.send(null)
// 或者可以这样写
req.open("get","http://www.example.com/somepage.php")
req.send('id=' + encodeURIComponent(id))

上面代码中,GET请求的参数,可以作为查询字符串附加在URL后面,也可以作为send方法的参数。

发送POST请求

var req=new XMLHttpRequest()
req.onreadystatechange=function(){
    if (ajax.readyState == 4) {
        if ((ajax.status >= 200 && ajax.status < 300)|| (ajax.status == 304) ){
            alert(req.responseText)
        }
    }
}
var data = 'email='
            + encodeURIComponent(email)
            + '&password='
            + encodeURIComponent(password);
ajax.open('POST', 'http://www.example.com/somepage.php', true);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax.send(data);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,369评论 0 7
  • 本文详细介绍了 XMLHttpRequest 相关知识,涉及内容: AJAX、XMLHTTP、XMLHttpReq...
    semlinker阅读 13,830评论 2 18
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,242评论 19 139
  • 原文出处 http://blog.poetries.top/2016/11/26/Ajax-summary 关注公...
    前端进阶之旅阅读 6,742评论 3 110
  • 浏览器与服务器之间,采用HTTP协议通信。用户在浏览器地址栏键入一个网址,或者通过网页表单向服务器提交内容,这时浏...
    徐国军_plus阅读 391评论 0 4