JavaScript中的ajax是何物?

一.解释

--------------------------------------------------------------------------------------------------------------------------------------------------------------

ajax是通过http请求获取资源(数据)的一种技术。

http是一种无记忆的请求,请求结束后不会保留请求的记忆。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

二、ajax请求大致过程

--------------------------------------------------------------------------------------------------------------------------------------------------------------

发送ajax请求 ---->  服务器响应  ---->  返回响应“数据”、"服务器请求响应代码"

1. ajax发送请求的“方法”常用有两种:

       get方式,post方式  (还有:HEAD、PUT、DELETE、OPTIONS...)

2. “服务器响”应返回响应“数据”类型通常有以下几种:

responseText 字符串、XML、html、json、js、jsonp

3. “服务器响应”返回响应http代码常见有以下几种:

200,401,404,501,503........

三、js中的ajax跨域

3.1 js因为了资源的“安全”采用“同源策略”:

同一服务器、域名、端口,上的ajax只能访问同一服务器、域名、端口上的资源(数据);

3.2  html有下下标签可以实现跨域:

img ,link, iframe, script , href ...

注:说白了,要实现跨域就是我的服务器可以访问别人服务器上的资源(数据)。

要注意是的,别人服务器如果写了安全方面的代码,可能会禁止跨域。

也就说,小明想要拿到小白家的东西,要经过小白同意。

当然走后门也可以不经过小白同意,这是安全问题我们不作说明。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

四、原生js中的ajax代码

--------------------------------------------------------------------------------------------------------------------------------------------------------------

3.1 非跨域情况下通过ajax请求数据

| GET方法 |

-------------

var ajaxObj = null;   //创建ajax对象

if( window.XMLHttpRequest ){        //ajax对象浏览器兼容

      ajaxObj = new XMLHttpRequest();

} else{

ajaxObj = new ActiveXOBject("Microsoft.XMLHTTP");

}

ajaxObj.open( ‘get‘,‘http://www.***.com/data.json‘, true);

// get方法,请求url数据地址,true为异步请求(默认true,false为同步请求)

ajaxObj.send(null)    //要发送的数据

ajaxObj.onreadystatechange = function(){

if(ajaxObj.readyState ==4 && ajaxObj.status == 200){

console.log(  ajaxObj.responseText  );

//拼接HTML字符串,把数据插入到时HTML字符串,操作DOM显示在页面中

}

}


注:get方法发送数据通过Url传送,拼接字符串

http://www.***.com/data.json?name = zhangsan&age=23

| post方法 |

-------------

var ajaxObj = null;   //创建ajax对象

if( window.XMLHttpRequest ){        //ajax对象浏览器兼容

      ajaxObj = new XMLHttpRequest();

} else{

ajaxObj = new ActiveXOBject("Microsoft.XMLHTTP");

}

ajaxObj.open( ‘post‘,‘http://www.***.com/data.json‘, true);

// get方法,请求url数据地址,true为异步请求(默认true,false为同步请求)

ajaxObj.send( 这里写要发送的数据 )    //要发送的数据

ajaxObj.onreadystatechange = function(){

if(ajaxObj.readyState ==4 && ajaxObj.status == 200){

console.log(  ajaxObj.responseText  )

//拼接HTML字符串,把数据插入到时HTML字符串,操作DOM显示在页面中

}

}


注:post方法发送数据通过http头进行传送

ajaxObj.send( sendData  )

var sendData = {

name: ‘‘zhangsan",

age : 23

}

3.2 跨域情况下通过ajax请求数据

3.2.1 常用script 标签跨域 Jsonp

<script>

function callback( backData ){

//  一定要注意,要求后台返回数据:是这样的形式  callback( ‘这里写返回的数据‘ )    ,不然就会出错

                               console.log( backData )

//  这里就是返回的数据,用js相应方法把返回的数据进行处理

// 如果返回字符串,可以用eval( ‘(‘+ backData+‘)‘)、JSON.parse( backData)方法处理成对象

// 拼接HTML字符串,把数据插入到时HTML字符串,操作DOM显示在页面中

}

</script>
             
                <script src="这里写要跨域的Url地址"></script>

//  这里写要跨域的Url地址"要求后台返回数据:是这样的形式  callback( ‘这里写返回的数据‘ )    ,不然就会出错

注:可以动态的在<head>标签中添加<script>标签进行跨域

五、jQuery中的ajax代码

--------------------------------------------------------------------------------------------------------------------------------------------------------------

$.ajax({

type : ‘get‘,

async : true,

cache : true,

data : {

name: ‘zhangsan‘,

age : 23

} ,

contentType : "application/x-www-form-urlencoded" ,  //默认值 //发送信息至服务器时内容编码类型

dataType : ‘json‘ ,

url : "",

success : function( backData ){

}

})

时间: 2024-10-13 18:42:21

JavaScript中的ajax是何物?的相关文章

JavaScript中利用Ajax 实现客户端与服务器端通信(九)

一:Ajax (Asynchronous JavaScript and XML)不是一个新的技术,事实上,它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起 Ajax的关键技术: 1.使用XHTML(HTML)和CSS构建标准化的展示层 2.使用DOM进行动态显示和交互 3.使用XML和XSLT进行数据交换和操纵 4.使用XMLHttpRequest异步获取数据 5.使用JavaScript将所有元素绑定在一起 二:如何去写Ajax应用程序: 第一步:创建一个XMLHTTP对象 第二的

【从0到1学Web前端】javascript中的ajax对象(一)

现在最流行的获取后端的(浏览器从服务器)数据的方式就是通过Ajax了吧.今天就来详细的来学习下这个知识吧.如果使用ajax来访问后段的数据,浏览器和浏览器端的js做了那些工作呢?我做了一个图,请大家看一下: 1.原生js的Ajax请求的方式 由上面的图我们大致的知道了ajax访问后端数据的一个过程.最重要的就是检测浏览器,创建XMLHttpRequest对象的过程: 代码如下: /* 判断是否支持XMLHttpRequest */ function createXHR() { if (typeo

原生javaScript中使用Ajax实现异步通信

AJAX本质就是在HTTP协议的基础上以异步的方式与服务器进行通信,所谓异步,就是指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. 以下开始简单介绍一下使用原生JS来如何实现AJAX异步通信 第一步:创建一个能够实现异步请求的对象  new XMLHttpRequest var xhr=new XMLHttpRequest(); console.log(xhr.readyState);//此时的状态码输出为0,它会返回XMLHTTP请求当前

JavaScript之Ajax-4 XML解析(JavaScript中的XML、Ajax返回并解析XML)

一.JavaScript中的XML XML DOM对象 - IE 浏览器通过 ActiveXObject 对象得到 XML DOM 对象 - 其他浏览器通过 DOMParser 对象得到 XML DOM 对象 XML DOM对象的支持 - XML DOM(XML Document Object Model)定义了访问和操作XML文档的标准方法 - DOM 把 XML 文档作为树结构来查看.能够通过DOM树来访问所有元素 加载并解析XML字符串 二.Ajax返回并解析XML 使用XHR发送XML字

javascript中Ajax请求的封装代码

/****************************ajax请求 start**************************************/ function ajaxClass(_url, _successCallback, _failureCallback, _urlParameters, _callbackParams, _async, _charset, _timeout, _frequency, _requestTimes, _frame) { /** * AJAX

JavaScript中Ajax

Ajax技术,就是指:向服务器请求额外的数据而无须重新加载整个页面.其核心就是 XMLHttpRequest对象.(简称:XHR) 在这里,我们先讨论IE7及更高版本,以及FF,Opera,Chrome,Safari都支持的XHR. 创建一个XHR对象: var xhr = new XMLHttpRequest(); XHR对象有几个方法,一个一个来: open(): xhr.open("get","example.php",true); 这里有三个参数,get:表

JavaScript笔记——使用AJax

在使用过JQuery之后,再来看JavaScript的Ajax实现就会觉得很麻烦,不过,最近使用到了,就记录一下吧 在JavaScript中Ajax的实现可以分为四步: 第一步 得到XMLHttpRequest对象 得到XMLHttpRequest > 大多数浏览器都支持:var xmlHttp = new XMLHttpRequest(); > IE6.0:var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); > IE

URL地址中中文乱码详解(javascript中encodeURI和decodeURI方法、java.net.URLDecoder.encode、java.net.URLDecoder.decode)

引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作为的参数的情况,这种情况下,一般都需要正确的设置和编码中文字符信息.乱码问题就此产生了,该如何解决呢?且听本文详细道来. 1.  问题的引出 在Restful的服务设计中,查询某些信息的时候,一般的URL地址设计为: get /basic/service? keyword=历史 , 之类的URL地址. 但是,在实际的开发和使用中,确是有乱码情况的发生,在后台的读取keyword信息为乱码,无法正确读取. 2. 乱码是如

【干货理解】理解javascript中实现MVC的原理

理解javascript中的MVC MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller); 模型:模型用于封装与应用程序的业务逻辑相关的数据以及对数据处理的方法.模型有对数据直接访问的权利.模型不依赖 "视图" 和 "控制器", 也就是说 模型它不关心页面如何显示及如何被操作. 视图:视图层最主要的是监听模型层上的数据改变,并且实时的更新html页面.当然也包括一些事件的注册或者aja