手动模拟一个类似jquery的ajax请求

 1 var $ = {
 2             parms:function(obj){
 3                 var str = ‘‘;
 4                 for(var k in obj){
 5                     str +=k+‘=‘+obj[k]+‘&‘;
 6                 }
 7                 str = str.slice(0,-1);
 8                 return str;
 9             },
10             ajax:function(options){
11                 var type = options.type;
12                 var url = options.url||‘‘;
13                 var data = options.data||‘‘;
14                 data = this.parms(data);
15                 // 判断请求方式
16                 if (type==‘get‘) {
17                     // 如果是get请求,send中没有参数,或者为null
18                     // 然后data数据应该拼接到url上
19                     url = url+‘?‘+data;
20                     data = null;
21                 }
22                 // 实例化对象
23                 var xhr = new XMLHttpRequest();
24                 // 设置请求行
25                 xhr.open(type,url);
26                 //判断是不是post请求,如果是post请求,就需要设置请求头
27                 if (type==‘post‘) {
28                     xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
29                 }
30                 // 设置请求正文
31                 xhr.send(data);
32                 // 监听并处理响应
33                 xhr.onreadystatechange = function(){
34                     if (xhr.readyState==4&&xhr.status==200) {
35                         result = xhr.responseText;
36                         console.log(result);
37                     }
38                 }
39             }
40         }
41         var obj = {
42             name:‘小航‘,
43             age:110
44         }
45         $.ajax({
46             type:‘post‘,
47             url:‘ajaxTools.php‘,
48             data:obj
49         })下面附上php代码
<?php
    // echo $_GET[‘name‘].‘----------‘.$_GET[‘age‘];
    echo $_POST[‘name‘].‘----------‘.$_POST[‘age‘];
?>

一个简单的post和get接收数据的php代码

时间: 2024-11-03 21:37:43

手动模拟一个类似jquery的ajax请求的相关文章

封装一个类似jquery的ajax方法

//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataType:"json"/"jsonp", // url:"地址", // data:{key:value} // success:function(){ // } // } //还需要一个跨域方法,可以访问远程服务器的数据 function myAja

jQuery 中 ajax 请求数据应用的一个小demo

举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名和文件图片路径问题 ... ajax01.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> ajax小例子 </title> </head> <body> <!--

【jquery】ajax 请求成功后新开窗口被拦截解决方法

问题: 前面开发项目时碰到一个问题,ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢? 分析: 浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了(不过如果是 _self 的话就不会有这个限制),即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('click')),浏览器也会认为不是由用户主动触发的,因此不能被安全执行,所

原生js和jquery发送ajax请求及封装

原生js                                   // ajax get 五部曲function ajax_get(url,data){ // 异步对象 var ajax=new XMLHttpRequest(); // 设置url和请求方式 // url方法 如果有数据要把数据拼接到url中?name=jack&age=20 if(data){ url+=?; url+=data; }else{}; ajax.open('get',url); // 发送请求 aja

PHP服务器文件管理器开发小结(三):使用jQuery提交AJAX请求

本节将讨论使用jQuery提交AJAX请求的基本方法,并完成显示首文件夹的基本方法. 同时,本节也将讨论使用图片链接提交请求的基本方法. jQuery是一套强大的JS库,将复杂的JS操作封装成简洁的语句,并提供对AJAX的支持.通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本.HTML.XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中.编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现

Angular和jQuery的ajax请求的差别

近期项目中使用angular,结果发现后台没法获取參数,所以,略微研究了一下两者在发送ajax时的差别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释contentType默认是 application/x-www-form-urlencoded; charset=UTF-8 contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8') Type: String Wh

Angular和jQuery的ajax请求的区别

最近项目中使用angular,结果发现后台没法获取参数,所以,稍微研究了一下两者在发送ajax时的区别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释contentType默认是 application/x-www-form-urlencoded; charset=UTF-8 contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8') Type: String Wh

jQuery发送Ajax请求以及出现的问题

普通jQuery的Ajax请求代码如下: $.ajax({ type: 'POST', url: "http://xxx/yyy/zzz/sendVerifyCode", data:{ phoneNo:$(".tel").val() }, success: function(data){ $.toast("发送成功", "text") }, error: function(){ $.toast("发送失败"

JQuery发送ajax请求不能用数组作为参数

JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){        var selectedMembers = document.getElementsByName('selectedMembers');        var cwIds = new Array(); //定义数组        for(var i=0;i<selectedMembers.length;i++){