js实现AJAX请求

摘自:http://www.myexception.cn/javascript/1448345.html

AJAX:全称“Asynchronous JavaScript and XML”(异步的JavaScript与XML)

AJAX请求的特点:

1、不刷新页面

2、服务器仅返回需要的数据

AJAX引擎:XMLHttpRequest此对象是浏览器中的内置对象,在目前的所有浏览器中都支持此对象。

IE中获取此对象:

if(window.ActiveXObject){
            var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

非IE中获取次对象:var xmlHttp=new XMLHttpRequest();

兼容模式:

var xmlHttp://声明一个对象

function creatXMLHttpRequest(){
      if(window.ActiveXobject){……}else{//非IE采用的方式……}

}

 请求的格式:
  xmlHttp.open(请求方式,请求地址,[是否为异步请求]);
  xmlHttp.send();

Get请求:
xmlHttp.open("GET","ajax.do?name=tom",true);
xmlHttp.send();
 注:
get请求的传值方式为请求地址后面跟  ?key=value

Post请求:
xmlHttp.open("POST","ajax.do",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("name=tom");
 注:
post请求的传值方式是在send()方法中进行传值,多个值用逗号隔开:name=tom,age=12
setRequestHeader的意思是设置请求头的类型为表单类型:Content-Type="application/x-www-form-             urlencoded"  是form表单的默认属性

 一个完整的AJAX请求的流程:
  1,创建XMLHttpRequest对象
  2,调用xmlHttp.open()设置请求内容
  3,设置回调函数(根据服务器返回的状态信息,做什么事情)
  4,调用xmlHttp.send()发送请求
function sendAjax(){
    createXMLHttpRequest();//调用上面设置的兼容模式
    xmlHttp.open("GET","ajax.do?name=tom",true);
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlHttp.onreadystatechange=callback;//状态信息发生改变调用函数
    xmlHttp.send();
}

//回调函数
function callback(){
    alert("callback");
}

sendAjax();//浏览器会弹出几次框(不同的浏览器可能不同)
 获取AJAX请求的状态码和HTTP协议的状态码:
 AJAX请求的状态码有四个值:
  var xmlState=xmlHttp.readyState;
  1,已初始化
  2,数据传输中
  3,响应数据传输中
  4,响应完毕
HTTP协议的状态码有很多:
  var httpState=xmlHttp.status;
常见的状态码如下:
状态码    意义
200    服务器正确处理了请求并响应
404    请求的页面未找到
403    没有权限访问请求的页面
405    页面不接收该请求方式
408    请求超时
500    服务器处理请求时发生异常
503    服务暂时不可用
304    网页未修改

使用Servlet获取服务器端的文本:
//ajax.do
//这是Servlet类中的doGet方法
public void doGet(HttpServletRequest request,HttpServletResponse response){
    PrintWriter out=response.getWriter();
    out.print("OK");
    out.flush();
    out.close();
}

//callback
function callback(){
    if(xmlHttp.readyState==4){//响应完毕后
        if(xmlHttp.status==200){//http状态码为200时
            var result=xmlHttp.responseText;//获取ajax请求的文本内容
            alert(result);
        }
    }
}

总结:
Ajax请求使用 XMLHttpRequest 对象
IE和非IE获取对象的方式不同
GET,POST请求的传值问题
Ajax请求的流程
Ajax请求的状态码和HTTP协议中服务器返回的状态码
获取简单地服务器返回的文本信息

js实现AJAX请求

时间: 2024-10-26 10:11:06

js实现AJAX请求的相关文章

JS原生Ajax请求

摘录一个JS原生Ajax请求行为,原文地址:http://caibaojian.com/ajax-jsonp.html ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 }, //请求参数 dataType: "json", success: function (response, xml) { //

原生JS发送Ajax请求

注意了,划重点了,这一题考不到算我输! 一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心技术当然是XMLHttpRequest对象: ajax请求过程:创建XMLHttpRequest对象.连接服务器.发送请求.接受相应数据. 废话少说上代码! p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0p

js 中ajax请求时设置 http请求头中的x-requestd-with= ajax

今天发现 AngularJS 框架的$http服务提供的$http.get() /$http.post()的ajax请求中没有带 x-requested-with字段. 这样的话,后端的php 就无法判断 接受的http请求是否是 ajax请求了. 怎么办呢,显然就是给http 请求头中 加上这个字段就可以了. 1.AngularJS 中可以这样子: I don't know well MVC3 but you can set a custom header for all request fr

用JS实现Ajax请求

AJAX核心(XMLHttpRequest) 其实AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象.所有的异步交互都是使用XMLHttpServlet对象完成的.也就是说,我们只需要学习一个Javascript的新对象即可. 1 var xmlHttp = new XMLHttpRequest():(大多数浏览器都支持DOM2规范) 注意,各个浏览器对XMLHttpRequest的支持也是不同的!为了处理浏览器兼容问题,给出下面方法来创建XMLHttpReq

原生JS发送Ajax请求、JSONP

一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心技术当然是XMLHttpRequest对象: ajax请求过程:创建XMLHttpRequest对象.连接服务器.发送请求.接受相响应数据. 废话少说上代码! <script type="text/javascript"> //调用ajax函数 ajax({ url:'./Te

python测试开发(06-前端[HTML,JS,CSS]+ajax请求)

1.HTML 略 2.JS var i = 0;while (i < 10) { console.log(i); i++;} for (var j = 0; j < 10; j++) { console.log(j)} // for in:遍历循环// 遍历数组var aList=Array( 11,22,33,44,55);for(i in aList){ console.log(i); //遍历数组的下标 console.log(aList[i]) //遍历数组的值} // 遍历对象:遍历

js原生ajax请求get post笔记

开拓新领域,贵在记录.下面记录了使用ajax请求的get.post示例代码 //ajax get 请求获取数据支持同步异步 var ajaxGet = function (reqUrl, params, callback, async) { var xhr = null; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject) { xhr = new ActiveXObject

js 实现 ajax 请求

下面是根据W3C上的解析,自己写的一个小小的ajax请求   框架是 ASP.NET  MVC <input type="button" id="btn_nowTime1" onclick="Myajax()" value="请求" /> var zhiniaoAjax = { xmlhttp: window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXOb

原生js实现Ajax请求

总的来说,Ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个网页的情况下,异步请求数据并刷新页面.举一个小的例子:Goole搜索页面.当用户在输入框输入关键字的时候,JavaScript会把这些字符发送到服务器,然后服务器返回一个搜索建议的列表. 原生的Ajax 原生的Ajax请求离不开XHR对象,即XMLHttpRequest对象.所有现代浏览器都内建有这个对象. 创建整个对象: var xhr = new XMLHttpRequest(); 这里有个版本的差异,IE5和IE6使