ajax以及一些乱码问题
程序员文章站
2022-03-31 13:53:34
创建xmlhttprequest 对象。 复制代码 代码如下:return window.activexobject ? new window.activexobject(...
创建xmlhttprequest 对象。
次对象一个 onreadystatechange 事件。有两个属性readystate,status。简单的ajax我们将使用到这几个东西。
以下使用到的createxmlhttp()方法就是上面这段代码!
1:以get方式发出一个请求的实现;
var get = function(url, b, callback){
var xmlhttp = createxmlhttp();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readystate == 4 && xmlhttp.status == 200){
callback(xmlhttp.responsetext);
}
}
if(b != undefined){
var arr=[],e;
for( e in b ){
arr.push(e + '=' + encodeuricomponent(b[e]));
//arr.push(e + '=' + b[e]);
// 经过测试如果不使用 encodeuricomponent 编码在ie8下无法正确传递中文
}
url += '?' + arr.join('&');
}
xmlhttp.open('get', url, true);
xmlhttp.send();
}
// 具体这个函数的参数设置也可以根据自己的习惯来设置
使用get方式去发送一个请求,我们是把要传递的参数格式化(a=1,b=2) 以后附加到url的后面。
服务器页面使用获取url参数的方式即可获得。(比如php: $_get["a"]);
值得注意的是我们在格式化参数的时候 使用到一个 encodeuricomponent()方法进行了编码是为了不出现乱码;
其实有3个方法可以完成这个工作。escape,encodeuri,encodeuricomponent,大家可以查下资料。前两个方法对于一些特殊字符还是没有进行编码。
所以使用第3个是比较好的选择了。
如果你不使用编码直接发送数据,各个浏览器的表现可能不一样。比如ie你在发送中文数据的时候就会出现乱码(当然出现乱码的情况还很多,请接着看..)。
2:以post方法发送一个请求的实现
var ajax = function(a){
var xmlhttp = createxmlhttp();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readystate == 4 && xmlhttp.status == 200 ){
a.success(xmlhttp.responsetext);
} else return xmlhttp;
}
xmlhttp.open('post', a.url, true);
// 请求为post的时候 必须设置头信息
xmlhttp.setrequestheader("content-type", "application/x-www-form-urlencoded");
// 序列化要发送的数据
var c = [];
for(var e in a.data){
c.push(e + '=' + encodeuricomponent(a.data[e]));
// 经过测试 经过url编码以后更能够保证发送数据的正确性。
//不编码可能造成部分特殊字符不能正确发送
}
a.data = c.join('&');
xmlhttp.setrequestheader("content-length", c.length); // 好像是可选
xmlhttp.setrequestheader("connection", "close"); // 好像是可选
xmlhttp.send(a.data);
// 次数据发送以后服务端 使用 post 获取数据 比如php $_post['a'];
}
参数a是一个对象 他包含 {url:"http:...",data:{a:1,b2},success:function(){}}
地址 数据 成功回调函数
使用post方法发出请求。数据也必须格式化(a=1,b=2) ;不过跟get方法不一样的地方是 我们是把数据写在了send()方法里(xmlhttp.send(a.data);)。
服务器页面使用获取表单数据的方式即可获得。(比如php: $_post["a"]);
值得注意的是在使用post发送请求的时候 我们必须设置请求的头信息。
xmlhttp.setrequestheader("content-type", "application/x-www-form-urlencoded");
经过测试如果不设置content-type为application/x-www-form-urlencoded;服务器页面是无法获取到通过send()方法发送的数据。
最后 关于乱码的问题。上面已经有两个地方会出现错误了。
1:比如参数没有进行编码直接传递,会出现传递不成功的问题。
2:在使用post方法的时候没有设置content-type,服务器页面无法获取发送过来的参数;
3:发送请求页面与请求页面的编码问题。在标准浏览器下请一定保持请求页面和被请求页面的编码方式是utf-8,不然中文会很悲剧。
<!--<meta http-equiv="content-type" content="text/html; charset=gb2312" />-->
<!--// 经过测试 不使用上面的meta 申明charset在ie下会出现乱码-->
<!--
* header("content-type: text/html; charset=gb2312");
被调用的ajax页面使用了gb2312的编码 在chorme下出现了乱码。
在ie下正常访问
-->
上面这里出现乱码的情况非常乱,不好排除。所以保持两个页面编码为utf-8 参数编码后在传递。可以有效防止乱码
我测试的几个文件打包
复制代码 代码如下:
return window.activexobject ? new window.activexobject('microsoft.xmlhttp') : new xmlhttprequest;
次对象一个 onreadystatechange 事件。有两个属性readystate,status。简单的ajax我们将使用到这几个东西。
以下使用到的createxmlhttp()方法就是上面这段代码!
1:以get方式发出一个请求的实现;
复制代码 代码如下:
var get = function(url, b, callback){
var xmlhttp = createxmlhttp();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readystate == 4 && xmlhttp.status == 200){
callback(xmlhttp.responsetext);
}
}
if(b != undefined){
var arr=[],e;
for( e in b ){
arr.push(e + '=' + encodeuricomponent(b[e]));
//arr.push(e + '=' + b[e]);
// 经过测试如果不使用 encodeuricomponent 编码在ie8下无法正确传递中文
}
url += '?' + arr.join('&');
}
xmlhttp.open('get', url, true);
xmlhttp.send();
}
// 具体这个函数的参数设置也可以根据自己的习惯来设置
使用get方式去发送一个请求,我们是把要传递的参数格式化(a=1,b=2) 以后附加到url的后面。
服务器页面使用获取url参数的方式即可获得。(比如php: $_get["a"]);
值得注意的是我们在格式化参数的时候 使用到一个 encodeuricomponent()方法进行了编码是为了不出现乱码;
其实有3个方法可以完成这个工作。escape,encodeuri,encodeuricomponent,大家可以查下资料。前两个方法对于一些特殊字符还是没有进行编码。
所以使用第3个是比较好的选择了。
如果你不使用编码直接发送数据,各个浏览器的表现可能不一样。比如ie你在发送中文数据的时候就会出现乱码(当然出现乱码的情况还很多,请接着看..)。
2:以post方法发送一个请求的实现
复制代码 代码如下:
var ajax = function(a){
var xmlhttp = createxmlhttp();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readystate == 4 && xmlhttp.status == 200 ){
a.success(xmlhttp.responsetext);
} else return xmlhttp;
}
xmlhttp.open('post', a.url, true);
// 请求为post的时候 必须设置头信息
xmlhttp.setrequestheader("content-type", "application/x-www-form-urlencoded");
// 序列化要发送的数据
var c = [];
for(var e in a.data){
c.push(e + '=' + encodeuricomponent(a.data[e]));
// 经过测试 经过url编码以后更能够保证发送数据的正确性。
//不编码可能造成部分特殊字符不能正确发送
}
a.data = c.join('&');
xmlhttp.setrequestheader("content-length", c.length); // 好像是可选
xmlhttp.setrequestheader("connection", "close"); // 好像是可选
xmlhttp.send(a.data);
// 次数据发送以后服务端 使用 post 获取数据 比如php $_post['a'];
}
参数a是一个对象 他包含 {url:"http:...",data:{a:1,b2},success:function(){}}
地址 数据 成功回调函数
使用post方法发出请求。数据也必须格式化(a=1,b=2) ;不过跟get方法不一样的地方是 我们是把数据写在了send()方法里(xmlhttp.send(a.data);)。
服务器页面使用获取表单数据的方式即可获得。(比如php: $_post["a"]);
值得注意的是在使用post发送请求的时候 我们必须设置请求的头信息。
xmlhttp.setrequestheader("content-type", "application/x-www-form-urlencoded");
经过测试如果不设置content-type为application/x-www-form-urlencoded;服务器页面是无法获取到通过send()方法发送的数据。
最后 关于乱码的问题。上面已经有两个地方会出现错误了。
1:比如参数没有进行编码直接传递,会出现传递不成功的问题。
2:在使用post方法的时候没有设置content-type,服务器页面无法获取发送过来的参数;
3:发送请求页面与请求页面的编码问题。在标准浏览器下请一定保持请求页面和被请求页面的编码方式是utf-8,不然中文会很悲剧。
复制代码 代码如下:
<!--<meta http-equiv="content-type" content="text/html; charset=gb2312" />-->
<!--// 经过测试 不使用上面的meta 申明charset在ie下会出现乱码-->
<!--
* header("content-type: text/html; charset=gb2312");
被调用的ajax页面使用了gb2312的编码 在chorme下出现了乱码。
在ie下正常访问
-->
上面这里出现乱码的情况非常乱,不好排除。所以保持两个页面编码为utf-8 参数编码后在传递。可以有效防止乱码
我测试的几个文件打包
推荐阅读