用 easyui ajax 写 http 测试客户端

前端之家收集整理的这篇文章主要介绍了用 easyui ajax 写 http 测试客户端前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

C++ 服务器,需要支持 http 协议,以前测试工具是 firefox 的 HttpRequester,单个功能比较容易测试,对于一个系统,几十条协议就显得不那么友好了。所以才有了写个 http 协议的测试工具。

坦白说,用 VC + libcurl 能轻松地实现 http 发包的测试功能。但是VC++ 对于前端脚本有着先天的不足,需要编译才能使用,在技术混杂的团队里面,每个团队成员技术专项都不一样的,很难做到统一用 VC。

前端脚本语言有着先天的优势,跨平台,入门容易,而且改完后,只要刷新下页面就能操作了,调试更简单,浏览器就自带调试功能,不需要安装任何IDE,所以无论编码,还是功能调试,都极大地提高了团队的生产效率。

10 年 C++ 经验,对于 web 前端研发,可谓一窍不通。从零开始:通过 w3school, 看了html,css,javascript 知识 一星期,动手做花了一星期,当然作为小白的我,可能遇到很多坑,希望大家指正。期望前端页面皮肤能漂亮点,简单点,所以就选择了 easyui。

测试工具功能需求很简单支持多个项目的测试工具。点击一个按钮发送一个命令,并且显示回包信息。(如下图)


作为web 前端的菜鸟,开发过程中遇到很多问题:

1、跨域问题,在c/c++ 的网络通信中,客户端爱连哪个就连哪个,没想到在web 浏览器就不支持了。

网络通信用的是 ajax,post 方法,json 包体,需要跨域的话,服务器回包,也需要添加一些头信息

前端代码

//封装 ajax post 方法
function ajax_post(url,data,success_callback,error_callback) {
	var tmp_index = index++;
			
	$.ajax({
        type: "POST",url: url,data: data,dataType: "json",anysc: true,timeout: 3000,success: function (result) { 
            success_callback(tmp_index,url,result);
        },error: function (request,status,error) {
            error_callback(tmp_index,request,error); 
	}
    }); 
}

服务端回包:

Access-Control-Allow-Methods: GET,POST
Access-Control-Allow-Origin: *
Allow: POST,GET
Connection: keep-alive
Content-Type: application/json;charset=UTF-8
Server: HttpServer
Content-Length: 149

{
        "code": 0,"msg": "成功","data": {
                "id": 322,"parent_id": 10,"name": "123","order": 1,"flag": "123","ctime": 1496709805
        }
}


这些信息调试过程中服务端可以开放。

Access-Control-Allow-Methods: GET,POST
Access-Control-Allow-Origin: *


2、读本地配置文件:本地配置文件是 json 文件,但是浏览器一般是不允许读本地文件的,所以浏览器进程在打开的时候应该添加参数。

例如 chrome 浏览器打开方式:chrome.exe --allow-file-access-from-files,其他浏览器也一样。在exe后面添加--allow-file-access-from-files

例如用 360浏览器: 360se.exe --allow-file-access-from-files

如果上述浏览器都不支持,就用 internet 吧,反正是测试工具什么浏览器都没关系了。


3、cookie 问题:request 包,有自定义的的 cookie 头,但是 cookie 死活传不到服务端,可能这也是基于浏览器的安全考虑;其实这对于 libcurl 是很简单的,无奈下,只能把 cookie 信息放在地址栏:

http://192.168.1.163:15007/bsw/manage/audio/type_add?token=abcdef123456789&userid=10015459  


源码下载:http://download.csdn.net/download/wenfh2020/9861925

下载源码后,打开这个文件即可:\jquery-easyui-1.5.2\demo\window\modalwindow.html


问题:想通过浏览器写本地的日志,暂时还没找到方法,知道的朋友可以告诉我一下,谢谢!

猜你在找的Ajax相关文章