分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

ajax原理

发布时间:2023-09-06 01:44责任编辑:沈小雨关键词:暂无标签
1.什么是ajax
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),
2.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文档中有写



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); ???????}); ???}

ajax原理

原文地址:http://blog.51cto.com/13579086/2074542

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved