ajax连接服务器

怎样实现用ajax向服务器发送请求并接收服务器返回的数据，并在HTML页面的Table中显示？

望采纳

一、Ajax原理是什么

AJAX全称(Async Javascript and XML)，即异步的JavaScript 和XML。

是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页。

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。

流程图如下：

校长想找班主任汇报工作，就委托秘书去叫班主任自己就接着做其他事情，直到秘书告诉他班主任已经到了，最后班主任跟领导汇报工作。

Ajax请求数据流程与“校长想找班主任汇报一下工作”类似，上述秘书就相当于XMLHttpRequest对象，校长相当于浏览器，响应数据相当于班主任。

浏览器可以发送HTTP请求后，接着做其他事情，等收到XHR返回来的数据再进行操作。

二、实现过程

实现Ajax异步交互需要服务器逻辑进行配合，需要完成以下步骤：

建 Ajax的核心对象 XMLHttpRequest对象。

通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接。

构建请求所需的数据内容，并通过XMLHttpRequest对象的 send() 方法发送给服务器端。

XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态。

接受并处理服务端向客户端响应的数据结果 将处理结果更新到 HTML页面中。

2.1创建XMLHttpRequest对象。

通过XMLHttpRequest() 构造函数用于初始化一个 XMLHttpRequest 实例对象。

const xhr = new XMLHttpRequest();。

2.2与服务器建立连接

通过 XMLHttpRequest 对象的 open() 方法与服务器建立连接。

xhr.open(method, url, [async][, user][, password])。

参数说明：

method：表示当前的请求方式，常见的有GET、POST。

url：服务端地址

async：布尔值，表示是否异步执行操作，默认为true。

user: 可选的用户名用于认证用途；默认为null。

password: 可选的密码用于认证用途，默认为null。

2.3给服务端发送数据

通过 XMLHttpRequest 对象的 send() 方法，将客户端页面的数据发送给服务端。

xhr.send([body])。

body: 在 XHR 请求中要发送的数据体，如果不传递数据则为 null 如果使用GET请求发送数据的时候，需要注意如下：

将请求数据添加到open()方法中的url地址中。

发送请求数据中的send()方法中参数设置为null。

2.4绑定onreadystatechange事件。

onreadystatechange 事件用于监听服务器端的通信状态，主要监听的属性为XMLHttpRequest.readyState ,。

关于XMLHttpRequest.readyState属性有五个状态，如下图显示：

只要readyState属性值一变化，就会触发一次readystatechange事件。

XMLHttpRequest.responseText属性用于接收服务器端的响应结果。

举个例子：

const request = new XMLHttpRequest()。

request.onreadystatechange = function(e){。

if(request.readyState === 4){ // 整个请求过程完毕。

if(request.status >= 200 && request.status <= 300){。

console.log(request.responseText) // 服务端返回的结果。

}else if(request.status >=400){。

console.log("错误信息：" + request.status)。

}

}

request.open('POST','。

request.send()

三、封装

通过上面对XMLHttpRequest对象的了解，下面来封装一个简单的ajax请求。

//封装一个ajax请求

function ajax(options) {。

//创建XMLHttpRequest对象。

const xhr = new XMLHttpRequest()。

//初始化参数的内容

options = options || {}。

options.type = (options.type || 'GET').toUpperCase()。

options.dataType = options.dataType || 'json'。

const params = options.data。

//发送请求

if (options.type === 'GET') {。

xhr.open('GET', options.url + '?' + params, true)。

xhr.send(null)。

} else if (options.type === 'POST') {。

xhr.open('POST', options.url, true)。

xhr.send(params)。

//接收请求

xhr.onreadystatechange = function () {。

if (xhr.readyState === 4) {。

let status = xhr.status。

if (status >= 200 && status < 300) {。

options.success && options.success(xhr.responseText, xhr.responseXML)。

} else {。

options.fail && options.fail(status)。

}

}

}

使用方式如下：

ajax({

type: 'post',。

dataType: 'json',。

data: {},

url: '

success: function(text,xml){//请求成功后的回调函数。

console.log(text)。

},

fail: function(status){请求失败后的回调函数。

console.log(status)。

}

})

一分钟学会什么是Ajax及Ajax请求的五个步骤

比如服务器上有张表或者list\x0d\x0aidnamesex\x0d\x0a1张三男\x0d\x0a2李四女\x0d\x0a3王五男\x0d\x0a你首先在后台代码中把这个表处理成为JSON格式然后用Response.write的方法输出来，比如这样\x0d\x0a[{id:1,name:'张三',sex:'男'},{id:2,name:'李四',sex:'女'},{id:3,name:'王五',sex:'男'}]\x0d\x0aJSON是用于在JS中描述实体对象的一种方式，具体关于JSON的知识可以看w3school.com.cn上的相关内容，我这儿就不给你细讲了，很简单，我只说做法：\x0d\x0a为了方便使用，你需要在你的页面中引用jQuery库，我不知道你用什么语言做的后台程序，原理一样\x0d\x0a$.ajax({\x0d\x0aurl:"这里换成你写好的用于把表转换成JSON的后台处理文件地址，比如a.aspx?参数",\x0d\x0atype:"POST",//这里是AJAX请求的方式\x0d\x0adataType:"JSON",//如果你回发的内容是JSON格式的就用这个，否则用Text或其他\x0d\x0adata:{\x0d\x0a参数1:值,\x0d\x0a参数2:值,\x0d\x0a......\x0d\x0a参数n:值\x0d\x0a},//要发送的参数，如果无参数可以不写此项\x0d\x0asuccess:function(data)\x0d\x0a{\x0d\x0a//此处写入发送成功后要处理的代码，而参数里的这个data，就是请求成功后返回来的上面那个格式的JSON，你可以用data[i]的值来取其中一行，如取张三的数据就是\x0d\x0adata[0].name，就取出了张三的name属性\x0d\x0a所以你可以在这里用循环去处理data，然后将结果用document.write的方式输出来就完成了。\x0d\x0a},\x0d\x0aerror:function(XMLHttpRequest,Error,F)\x0d\x0a{\x0d\x0a//出错后可以在这里给出提示，Error参数表示错误信息\x0d\x0a}\x0d\x0a});\x0d\x0a还有弄不清楚的地方可以继续和我探讨。

ajax能不能发送https请求获取服务器数据

AJAX的意思就是异步的JavaScript和XML。简而言之，它是使用XMLHttpRequest对象与服务器端通信的脚本语言。它可以发送及接收各种格式的信息，包括JSON、XML、HTML和文本文件。AJAX最为吸引人的就是它的“异步”特性，AJAX可以无需刷新页面而与服务器端进行通信。

Ajax请求的五个步骤：

1、建立xmlHttpRequest对象。

if(window.XMLHttpRequest) {。

xmlHttp = new XMLHttpRequest();。

if(xmlHttp.overrideMimeType) {。

xmlHttp.overrideMimeType("text/xml");。

} else if(window.ActiveXobject) {。

var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];。

for(var i = 0; i < activeName.length; i++) {。

try {

xmlHttp = new ActiveXobject(activeName[i]);。

break;

} catch(e) {}

if(!xmlHttp) {

alert("创建xmlhttprequest对象失败");。

} else {}

2、设置回调函数

xmlHttp.onreadystatechange= callback;。

function callback(){}。

3、使用OPEN方法与服务器建立连接  xmlHttp.open("get","ajax?name="+ name,true)。

此步注意设置http的请求方式（post/get）,如果是POST方式，注意设置请求头信息xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")。

4、向服务器端发送数据

xmlHttp.send(null)；如果是POST方式就不为空。

5、在回调函数中针对不同的响应状态进行处理。

if(xmlHttp.readyState == 4){       //判断交互是否成功。

if(xmlHttp.status == 200){         //获取服务器返回的数据         //获取纯文本数据。

var responseText =xmlHttp.responseText;。

document.getElementById("info").innerHTML = responseText;。

扩展资料：

Ajax优缺点

优点：

1、异步请求，不妨碍用户浏览页面或者其他操作。

2、局部刷新，无需重新刷新页面。

3、界面与应用分离。有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

4、基于标准被广泛支持。

5、前端和后端负载平衡。最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。

缺点：

1、back和History,对浏览器机制的破坏。

2、安全问题。易受到黑客攻击。

3、对搜索引擎支持较弱。

4、不能很好支持移动设备。

5、违背URL和资源定位的初衷。

ajax请求服务器的事件响应中,如何判断响应已就绪的

1、ajax能发送https请求获取服务器数据。

2、总结android 采用http请求访问网络并获取数据的步骤：

（1）发送http请求，并传递相应的参数；

（2）获取http返回的状态，根据返回的状态，如404错误，500错误，连接超时，请求异常等，并在界面提示相关状态；

（3）web服务器端封装数据并返回一定格式的数据对象，例如封装json对象；

（4）http状态返回正常，取出正确的参数并解析，如解析json对象；

（5）解析服务器端返回的数据后显示在android相应的控件或存储本地数据，提示操作完成等。  。

3、服务器端封装json数据的方法：采用php语言封装json的两种格式，数据可以是从数据库返回的数组，本例只采用简单的赋值方式返回数据。$_POST["type"]对应的是post的请求方式获取参数值。

Ajax请求有哪些请求方式

ajax请求服务器的事件响应中，按如下方法判断响应已就绪：

1、在onreadystatechange事件中，当readyState等于4，且状态码为200时，表示响应已就绪。

2、Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

原文地址：http://www.qianchusai.com/ajax%E8%BF%9E%E6%8E%A5%E6%9C%8D%E5%8A%A1%E5%99%A8.html