专栏首页小古哥的博客园深入解析AJAX的原理

深入解析AJAX的原理

AJAX:Asynchronous JavaScript And Xml(异步的JS和XML)

同步:客户端发起请求》服务端的处理和响应》客户端重新载入页面(循环)

异步:客户端实时请求》服务端处理和响应》客户端获得响应后局部刷新页面

异步实现的关键是,XMLHttpRequest对象的出现

创建XHR对象

var request;
if(window.XMLHttpRequest){
     request = new XMLHttpRequest(); //IE7+,Firefox,Chrome,Opera,Safari
}else{
     request = new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5 
}

HTTP请求:无状态协议(不建立持久链接,服务器不保留记录是没有记忆),它的过程如下7步:

1、建立TCP连接

2、浏览器向服务器发送请求命令

3、浏览器发送请求头信息

4、服务器应答

5、服务器发送应答头信息

6、服务器想浏览器发送数据

7、服务器关闭TCP连接

HTTP请求的组成:请求的方法(get或post等);请求的URL;请求头(环境信息,身份验证);请求体。

HTTP响应的组成:状态码(200,304等);响应头(服务器时间,其他信息);响应体。

XHR对象的方法

open(method,url,async)//async同步还是异步,默认异步为true

send(string)

监听请求的响应是否成功

var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange=function(){
    if(request.readyState===4 && request.status===200){
        request.responseText//取得响应体内容
    }      
}

用post提交表单时,需要在open和send中间添加一个设置

request.setRequesrHeader("Content-Type","application/x-www-form-rulencoded");

json解析两种方法:

var jsonData='{"staff":[{"name":"洪七公","age":70},{"name":"郭靖","age":35}]}'
var jsonObj=eval('('+jsonData+')');//容易产生错误,不会校验json是否合法,会直接执行json中的js语句
var jsonObj=JSON.parse(jsonData);//推荐

Jquery中的$.ajax([settings])

type:类型,“POST”或“GET”,默认“GET”

url:发送请求的地址

data:是一个对象,连同请求发送到服务器的数据

dataType:预期服务器返回的数据类型,一般为json,若不指定jquery将根据http包mime信息智能判断

success:方法,请求成功的回调函数,传入返回的数据及包含成功代码的字符串

error:方法,请求失败的回调函数,传入XMLHttpRequest对象

$.ajax({
   type:"GET",
   url:"sever.php?number"+$("#keyword").val(),
   dataType:"json",
   success:function(data){
        if(data.success){alert(data.msg)}
    },
    error:function(err){
        alert("错误状态码:"+err.status)
    }
})    

跨域

当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。

方法一:后端代理

方法二:JSONP(支持get,不支持post)

<!--在www.aaa.com页面中-->
<script>
function jsonp(json){
    alert(json["name"])
}
</script>
<script scr="http://www.bbb.com/jsonp.js"></script>
<!--在www.bbb.com页面中-->
jsonp({'name':"洪七公","age":70})

 方法三:HTML5提供的XHR2(ie10以下版本不支持)

服务端增加如下(PHP)

header("Access-Control-Allow-Origin:*")
header("Access-Control-Allow-Methods:POST,GET")

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS高级-数据结构的封装

    最近在看了《数据结构与算法JavaScript描述》这本书,对大学里学的数据结构做了一次复习(其实差不多忘干净了,哈哈)。如果能将这些知识捡起来,融入到实际工作...

    小古哥
  • 秒懂JS对象、构造器函数和原型对象之间的关系

    学习JS的过程中,想要掌握面向对象的程序设计风格,对象模型(原型和继承)是其中的重点和难点,拜读了各类经典书籍和各位前辈的技术文章,感觉都太过高深,花费了不少时...

    小古哥
  • 基于jquery的-获取短信验证码-倒计时

    在制作短信验证的时候,需要做一个获取短信按钮,点击后显示倒计时, html代码如下: 1 <input class="gain" type="button" v...

    小古哥
  • 突破Java面试(39)-分布式服务接口请求的顺序性

    服务 A 调用服务 B,先插入再删除。好,结果俩请求过去了,落在不同机器上,可能插入请求因为某些原因执行慢了一些,导致删除请求先执行了,此时因为没数据所以啥效果...

    JavaEdge
  • 基础扩展 | 20. 建立二叉树

    先看看下图1所示的一棵完全二叉树,图中标出了结点的内容、结点编号以及上下层子树之间的关系。

    fanjy
  • thinkphp常用配置config

    下载解压 ThinkPHP 3.2.3,在默认的应用 Application(./Application) 中,包含一个默认的模块 Home(./Applica...

    公众号php_pachong
  • 2017——私有云“死亡”的一年

    如今,人们越来越清楚的是,企业选择停止建立私有云基础设施,并于2017年转向混合IT基础设施。 许多企业依赖于数据中心服务作为他们事业和谋生手段。然而毫无疑问,...

    BestSDK
  • 动态链接库使用举例

    6.验证下so是不是动态加载的,只需要修改print.c中打印,改成printf("msg=%s/n", msg);,然后执行make -f makefile....

    王亚昌
  • JavaScript引用类型之Array类型一

    一、简介 除了Object之外,Array类型恐怕是ECMAScript中最常用的类型了。下面就来分析ECMAScript中的数组与其他语言中的数组的异同性: ...

    郑小超.
  • SAP WebIDE里的JavaScript代码检查code check

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券