概述AJAX

最新推荐文章于 2022-09-03 11:21:57 发布

勒城

最新推荐文章于 2022-09-03 11:21:57 发布

阅读量121

点赞数

分类专栏：笔记文章标签： ajax

本文链接：https://blog.csdn.net/Lecheng_/article/details/116309198

版权

概述AJAX

Ajax即Asynchronous Javascript And XML异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术。是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

Ajax技术的组成

运用XHTML+CSS来数据显示
运用JavaScript操作DOM（Document Object Model）来执行页面的部分更新及动态效果
运用XML和XSLT进行数据交互
无效良构有效
运用XMLHttpRequest【浏览器上的组件】与网页服务器进行异步资料交换

最后使用JavaScript绑定一切
###同步和异步
同步会导致客户端的不连续体验，这对客户端不够友好，使用Ajax就是将同步造成的不连续客户体验转换为连续的客户体验

异步可以达到

减轻服务器的压力，AJAX采用的是按需取数的原则，以最大程序的减少冗余请求和影响对服务器造成的负担
无刷新页面可以减少用户等待事件，缓解客户等待心里，以带来更友好的用户体验
进一步促进页面呈现和数据的分离

Ajax编程模型

AJAX中应用核心技术有JavaScript、XMLHttpRequest对象、DOM和XML/json

微软XMLHttpRequest是XMLHTTP组件的对象，通过这个对象只同服务器进行数据层面的交换，而不用每次都刷新界面
JavaScript一直定位为客户端的脚本语言，应用最多的是表单数据的校验，使用AJAX后可以通过JavaScript操作XMLHttpRequest来和数据库交互
DOM是提供给html和xml使用的一组API，提供了文件的表述结果，并可以利用它改变其中的内容和可见物。脚本语言通过DOM才可以和页面进行交互
XML可以规范的定义结构化数据，曾经是数据传输和文档符合统一的标准，使用XML表述的数据和文档可以使用所有应用共享

AJAX编程实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
            <title>Title</title>
            <script>
                var xhr=null;
                function fff(){
   
                let nameErr=document.getElementById("nameErr");
                nameErr.innerHTML="";
            }
                function ff(){
     //要求页面种必须有一个用户事件触发初始化函数的执行
                //获取用户在<input name="name">中输入的数据
                let pname=document.getElementById("pname").value;
                createXHR();   //按照不同的浏览器创建Ajax引擎XMLHttpRequest对象
                if(xhr){
   
                xhr.open('GET','product.do?action=exists&name='+pname,true)//打开连接
                xhr.onreadystatechange=callback;//注册回调事件处理函数，用于处理readyState变更
                xhr.send();  //发送请求
            }else{
   
                alert('您的浏览器不支持异步操作!');
            }
            }
                function callback(){
     //定义回调事件处理函数
                let nameErr=document.getElementById("nameErr");
                //readyState有0-4共5种准备状态值，当变化后则触发这个函数执行

                if(4==xhr.readyState){
     //判断准备状态值是否为4,4表示下载响应完毕
                if(200==xhr.status){

最低0.47元/天解锁文章

勒城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
概述AJAX

##概述AJAXAjax即Asynchronous Javascript And XML异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术。是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术###Ajax技术的组成运用XHTML+CSS来数据显示运用JavaScript操作DOM（Document Object Model）来执行页面的部分更新及动态效果运用XML和XSLT进行数据交互无效良构有效运用XMLHttpRequest【浏览器上的组件】与网
复制链接

扫一扫