ajax。xmlHttpRequest的原理

最新推荐文章于 2023-04-24 23:04:57 发布

weixin_34348174

最新推荐文章于 2023-04-24 23:04:57 发布

阅读量132

点赞数

文章标签： json javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/zsber/p/9526108.html

版权

一、什么是ajax

ajax是一种异步通信技术。在ajax出现之前，客户端与服务端之间直接通信。引入ajax之后，客户端与服务端加了一个第三者--ajax。有了ajax之后，通过在后台与服务器进行少量数据交换，可以达到在不刷新整个页面的情况下实现局部刷新。其原理如图

总结：简单来说就是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面（这里并不是直接显示在页面）。

二：XmlHttpRequest对象

XMLHttpRequest是ajax的核心机制，完全是用来向服务器发出一个请求的，仅仅如此.

XMLHttpRequest对象一共有三个属性：onreadystatechange(全小写)、readyState、status

　　1.onreadystatechange

　　xmlhttp.onreadystatechange = function(){

　　}；

　　每次readyState对象的改变都会触发一次onreadystatechange属性储存的函数，一次有效的Ajax请求一共会触发5次该事件

　　2.readyState

　　　　一共有5个值，0~4分别代表不同的状态。

　　　　0 —— 请求未初始化

　　　　1 —— 服务器已建立了链接

　　　　2 —— 请求已被服务器接收

　　　　3 —— 请求正在被处理

　　　　4 —— 请求完成处理，响应就绪

　　　　if(xmlhttp.readyState==4…):用以判断当前服务器是否已准备好响应

　　3.Status

　　代表着Http状态码 200：OK

　　if(xmlhttp.readyState==4&& xmlhttp.status==200)

三：原生ajax的流程

原生ajax的请求总结为一下六个步骤

1.创建XHR对象

2.调用open()方法创建请求

3.调用send()方法发送请求

4.onreadychange捕获请求的状态码

5.判断状态吗是否成功

6.调用ajax的responseText属性返回数据：（获取服务器响应内容：responseText / responseXML）

四：Jquery对ajax的封装

$.ajax，....(其他忽略)

这个是JQuery对ajax封装的最基础方法，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下我们都可以通过此方法进行异步刷新的操作。

jquery封装了XMLHttpRequest的底层实现，直接调用提供的方法即可

function confirm(){
    $('#check-form').bootstrapValidator('validate');
    if($('#check-form').data('bootstrapValidator').isValid()){    
        if($.trim($('#password').val()) != ''){
            var memberNo = getValueAny('memberNo');
            var passwordEncrypt = $('#password').val();
                ajax({
                url: "@url("/common/checkPassword.action")",
                type: "POST",
                data:{
                    memberNo:getValueAny('memberNo'),
                    passwordEncrypt:passwordEncrypt
                },
                async:false,
                success: function(result) {
                        this.parent.save();
                        closeSelfDialog();
                }
            });
        }
    }
}

contentType: 告诉服务器，我要发什么类型的数据

dataType：告诉服务器，我要想什么类型的数据，如果没有指定，那么会自动推断是返回 XML，还是JSON，还是script，还是String。

五 .json字符串与json对象的区别

　　a.JSON对象是直接可以使用JQuery操作的格式，如C#中可以用对象（类名）点出属性（方法）一样
　　b.JSON字符串仅仅只是一个字符串，一个整体，不截取的话没办法取出其中存储的数据，不能直接使用，除非你只想alert()他；

JSON对象:

var str2 = { "name": "deluyi", "sex": "man" };

JSON字符串:

var str1 = '{ "name": "deyuyi", "sex": "man" }';

　　1.将"JSON对象"转化为"JSON字符串"的方法?

　　　　使用全局方法JSON.stringify()与toJSONString()　　　

　　　　例如：

　　　　　　obj.toJSONString(); //将JSON对象转化为JSON字符

　　　　或者

　　　　　　JSON.stringify(obj); //将JSON对象转化为JSON字符

　　var params = $('#user-form').serializeObject();//这样就可以获得整个表单所有字段的数据，并以object格式序列化

关于ajax设置contentType，data的部分相关实验：

前端：

if ($('#main-form').data('bootstrapValidator').isValid()) {
        var sql = document.getElementById('sql').value
         $.ajax({
            url:'@url("/loginSysInformConf/select.action")',
            type:"post",
            data:sql,
            contentType:"application/json",
            mask:true,
            success:function(result){
                if(result && result.data){
                    confirm(result.messages+"，是否要保存？", function(){
                        save();
                    });
                }else{
                    error(result.messages+",请核对你的sql文");
                }
            },
            error: function(xmlHttpRequest, message, exception) {
                error("系统异常：\n" + message);
            }
        }); 
    }

sql的值为：SELECT USER_NAME as USER_NAME,LAST_LOGIN_TIME as LAST_LOGIN_TIME FROM TB_USER@TEST

后台：

public ResultBean select(@RequestBody String sql){
        List<SystemUserLoginInfoEntity> userList = loginSysInformConfService.select(sql);
        ResultBean bean=new ResultBean();
        bean.setData(userList);
        if(userList != null && userList.size() > 0){
            bean.setData(userList);
            bean.setMessages("测试通过");
            bean.setStatus(true);
        }else{
            bean.setMessages("测试未通过");
            bean.setStatus(false);
        }
        return bean;
    }

情况1：data:sql contentType:"application/json", @RequestBody String sql

　　接收情况：SELECT USER_NAME as USER_NAME,LAST_LOGIN_TIME as LAST_LOGIN_TIME FROM TB_USER@TEST -------正常

情况2：data:JSON.stringify(sql) contentType:"application/json", @RequestBody String sql

接收情况："SELECT USER_NAME as USER_NAME,LAST_LOGIN_TIME as LAST_LOGIN_TIME FROM TB_USER@TEST"

情况3：data:{sql:sql} contentType:"application/json", @RequestBody String sql

　　接收情况：sql=SELECT+USER_NAME+as+USER_NAME%2CLAST_LOGIN_TIME+as+LAST_LOGIN_TIME+FROM+TB_USER%40TEST

情况4：data:sql @RequestBody String sql

　　接收情况：SELECT+USER_NAME+as+USER_NAME%2CLAST_LOGIN_TIME+as+LAST_LOGIN_TIME+FROM+TB_USER%40TEST=

情况5：data:JSON.stringify(sql) @RequestBody String sql

　　接收情况：%22SELECT+USER_NAME+as+USER_NAME%2CLAST_LOGIN_TIME+as+LAST_LOGIN_TIME+FROM+TB_USER%40TEST%22=

情况6：data:{sql:sql} @RequestBody String sql

　　接收情况：sql=SELECT+USER_NAME+as+USER_NAME%2CLAST_LOGIN_TIME+as+LAST_LOGIN_TIME+FROM+TB_USER%40TEST

情况7：data:{sql:sql} String sql

　　接收情况：SELECT USER_NAME as USER_NAME,LAST_LOGIN_TIME as LAST_LOGIN_TIME FROM TB_USER@TEST -------正常

情况8：data:JSON.stringify(sql) String sql

　　接收情况：null

情况9：data:sql String sql

　　接收情况：null

情况10：data:sql contentType:"application/json", String sql

　　接收情况：null

情况11：data:JSON.stringify(sql) contentType:"application/json", String sql

　　接收情况：null

情况12：data:{sql:sql} contentType:"application/json", String sql

　　接收情况：null

总结：1.@RequestBody接收的是一个Json对象的字符串，而不是一个Json对象

　　 2.　　 data:sql contentType:"application/json", @RequestBody String sql

　　　　或 data:{sql:sql} String sql才能正常接收数据

　　　3.不使用contentType: “application/json”则data可以是对象------------data: { id: nodeId },

　　　　使用contentType: “application/json”则data只能是json字符串--------------------data: "{'id': " + nodeId +"}",

转载于:https://www.cnblogs.com/zsber/p/9526108.html

weixin_34348174

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax。xmlHttpRequest的原理

一、什么是ajaxajax是一种异步通信技术。在ajax出现之前，客户端与服务端之间直接通信。引入ajax之后，客户端与服务端加了一个第三者--ajax。有了ajax之后，通过在后台与服务器进行少量数据交换，可以达到在不刷新整个页面的情况下实现局部刷新。其原理如图总结：简单来说就是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操...
复制链接

扫一扫