博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ajax原理
阅读量:6418 次
发布时间:2019-06-23

本文共 2482 字,大约阅读时间需要 8 分钟。

1.什么是ajax

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),
2.ajax原理
ajax原理
每个新的浏览器都有内置的ajax引擎
第一步:使用js获取浏览器内置的ajax引擎(XMLHttpRequest对象)
第二步:通过ajax引擎确定请求路径,参数,方式,并把回调函数告诉ajax引擎
第三步:通知ajax发送请求(ajax引擎会在不刷新浏览器地址栏的情况下,发送请求)
第四步:服务器获取参数
第五步:服务器处理请求参数(增删改查)
第六步:服务器响应数据给浏览器
ajax引擎获得服务器响应的数据,通过执行js的回调函数,将数据传递给浏览器页面
第七步:通过设置给ajax引擎的回调函数获得服务器响应数据
第八步:使用js在指定的位置,显示响应数据,从而局部修改页面的数据,达到局部刷新的目的
3.javascript ajax
发送get请求

function sendGet(){        1 获得ajax引擎        var xmlhttp = new XMLHttpRequest();        2设置回调函数        xmlhttp.onreadystatechange = function(){            if(xmlhttp.readyState == 4){    //服务器响应完成,数据加载成功 ,可能正常,也可能服务器异常                if(xmlhttp.status == 200){  //处理服务器响应正常数据                    //获得数据并输出                    var txt = xmlhttp.responseText;                    alert(txt);                }            }        };        3 确定请求路径        参数1:请求方式        参数2:请求路径        xmlhttp.open("GET", "地址?参数=值&参数=值");        4 发送请求        参数body :请求体,get请求没有请求体,一般建议null        xmlhttp.send(null);    }

发送post请求 注意post请求比get请求多一个请求头

function sendPost(){        //1 获得ajax引擎        var xmlhttp = new XMLHttpRequest();        2 设置回调函数        xmlhttp.onreadystatechange = function(){            if(xmlhttp.readyState == 4){    //服务器响应完成,数据加载成功 ,可能正常,也可能服务器异常                if(xmlhttp.status == 200){  //处理服务器响应正常数据                    //获得数据并输出                    var txt = xmlhttp.responseText;                    alert(txt);                }            }        };        //3 确定请求路径/        // * 参数1:请求方式        // * 参数2:请求路径        xmlhttp.open("POST", "地址");        // * 需要设置请求头 , 向一个打开但未发送的请求设置或添加一个 HTTP 请求。        xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");        //4 发送请求        // * 参数body :请求体,post请求参数在请求体中        xmlhttp.send("参数=值&参数=值");    }

4.XMLHttpRequest浏览器兼容问题,这是因为老版本的浏览器

function sendPost(){
//1 获得ajax引擎
var xmlhttp;
if (window.XMLHttpRequest){//谷歌和火狐
xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {//IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
在w3cschool文档中有写
ajax原理
ajax原理
ajax原理
ajax原理

5.jquery ajax

//发送get请求        function sendGet(){        // $.get() 提供工具方法,用于发送ajax,请求方式get        // * 参数1:请求路径        // * 参数2:请求参数        // * 参数3:回调函数,需要设置一个变量接收数据        $.get(url,params , function(data){            alert(data);        });    }            //发送post请求    function sendPost(){        $.post(url,params , function(data){            alert(data);        });    }

转载于:https://blog.51cto.com/13579086/2074542

你可能感兴趣的文章
十单元补充:时间同步
查看>>
Python里"is"与"=="是不是一样的?
查看>>
如何有效预防SQL注入?
查看>>
#25 centos7(RHEL)系列操作系统的启动流程、systemd的特性、与命令systemctl的使用...
查看>>
shell简介
查看>>
网络基础配置
查看>>
Java之品优购课程讲义_day12(8)
查看>>
Python多重继承用法 Python周末学习
查看>>
thinkphp自动验证中的静态验证和动态验证和批量验证
查看>>
简练软考知识点整理-软件测试之边界值分析
查看>>
Linux手工编译安装apache
查看>>
理解高性能内存缓存对象缓存Memcached原理 (Memcached核心概念,部署)
查看>>
11 个简练的 Java 性能调优技巧
查看>>
linux 下安装 talib库
查看>>
高级文件系统管理磁盘配额,RAID
查看>>
Varnish安装
查看>>
海内外加速
查看>>
【数据库】分布式数据库技术与实现
查看>>
Oracle分析表及动态采样
查看>>
[BZOJ 1492][NOI2007]货币兑换Cash(CDQ分治+斜率优化Dp)
查看>>