• Ajax技术


    ajax原理:

    请求由ajax引擎对象发送,响应数据,浏览器不会直接进行处理,而是流转给发请求的ajax引擎对象。

    这样我们可以通过操作ajax引擎对象变相的实现在页面中显示新的响应资源。

    本质

    js的DOM操作中的数据由程序员自己写死声明,变成从服务器动态的获取。

    使用

    1 创建ajax引擎对象 var ajax; if(window.XMLHttpRequest){

    ajax=new XMLHttpRequest//火狐 谷歌

    }else if(window.ActiveXObject){

    ajax=new ActiveXObject("Msxml2.XMLHTTP");//ie

    }

    2 声明ajax监听函数 ajax.onreadystatechange=function() //函数内要判断数据状态码

    3 创建并发送请求

    ajax.open(method,url,async)

    ajax.send("请求数据")

    解释:

    method:表示请求的方式,值为get/post

    url:表示请求地址,一般为要请求的servlet的别名。

    async:表示异步还是同步请求, true表示异步, false表示同步,默认为异步。

    注意:如果请求方式是get方式,则请求数据需要拼接在url的后面,以?隔开,键值对,并且send中要写null,如果是post请求方式,则在send方法中书写请求数据即可。并且要声明数据的提交格式为键值对。

    示例:

    //使用get方式

    ajax.open("get","user?uname="+uname,true); ajax.send(null);

    //post方式

    ajax.open("post","user", true);

    //设置请求数据的格式

    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    ajax.send("un="+uname);

    4 ajax的响应数据格式

    普通文本:

    后台在接收到ajax请求后,处理后直接响应普通字符串给ajax

    josn数据:

    后台在接收到ajax请求后,处理后响应json格式的字符串给ajax

    ajax处理代码中使用eval()方法将json数据转换为js对的对象,

    将对象中的数据通过js的dom操作显示到页面中。

    注意:

    json格式:

    var 对象名={

    键名:值,

    键名:值,

    ........

    }

    xml数据:

    后台在接收到ajax请求后,处理后响应xml格式的字符串给ajax。

    前台使用ajax.responseXML进行数据接收,返回的是xml文档对象(document)。使用document对象将xml中取出并显示到页面中即可

    注意:后台的响应数据格式必须设置成xml格式:resp.setContentType("text/xml;charset=utf-8");

    注意:ajax是前端的技术,由浏览器进行解析执行。

    使用流程(原生)

    1 创建ajax引擎对象

    2 覆写onreadystatechange函数

    判断数据状态码

    判断响应状态码

    获取响应数据

    处理响应信息

    3 创建并发送请求

    封装:相同的保留,不同的传参。最终封装成一个js文件。

    jquery中的ajax:

    使用方式:

    1 $.get(url,data,fn)

    2 $.post(url,data,fn)

    3 $.ajax({

    type:"get",

    url:"data",

    success:function(data){

    alert(data);

    }

    })

  • 相关阅读:
    python环境的安装 环境变量和系统变量
    git语句(后续补充)
    pycharm的安装配置及思维导图
    python基础知识 01
    C#基础系列——异步编程初探:async和await
    Type.MakeGenericType 方法 (Type[]) 泛型反射
    ZeroFormatter
    intelliJ IDEA相关
    truesky天气系统
    tressfx hair
  • 原文地址:https://www.cnblogs.com/Kinghao0319/p/12066671.html
Copyright © 2020-2023  润新知