Home Web Front-end JS Tutorial Ajax processing three data types returned by the server

Ajax processing three data types returned by the server

Dec 30, 2017 pm 08:08 PM
ajax server

This article mainly introduces how ajax handles the three data types returned by the server. It has certain reference and value for learning ajax. Friends who are interested in ajax can refer to it

The principle is very Simple, the structure is basically unchanged, but the way of processing the returned data is changed.

1.Text/HTML format
This return type is very simple to handle, just treat it as a character Just use it serially. For convenience of use, it is encapsulated into the following function:


/**
 * @function 利用ajax动态交换数据(Text/HTML格式)
 * @param url  要提交请求的页面
 * @param jsonData 要提交的数据,利用Json传递
 * @param getMsg 这个函数可以获取到处理后的数据
 */
function ajaxText(url,jsonData,getMsg)
{
  //创建Ajax对象,ActiveXObject兼容IE5,6
  var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
  //打开请求
  oAjax.open('POST',url,true);//方法,URL,异步传输
  //发送请求
  var data = '';
  for(var d in jsonData)  //拼装数据
    data += (d + '=' +jsonData[d]+'&');
  oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  oAjax.send(data);
  //接收返回,当服务器有东西返回时触发
  oAjax.onreadystatechange = function ()
  {
    if(oAjax.readyState == 4 && oAjax.status == 200)
    {
      if(getMsg) getMsg(oAjax.responseText);
    }
  }
}
Copy after login


The server-side return data format is as follows:
For example :


//返回的是xml格式
//header("Content-Type:text/xml;charset=utf-8");
//返回的是text或Json格式
header("Content-Type:text/html;charset=utf-8");
//禁用缓存,是为了数据一样的前提下还能正常提交,而不是缓存数据
header("Cache-Control:no-cache");
$username = $_POST['username']; //获取用户名
if(empty($username))
  echo '请输入用户名';
else if($username == 'acme')
  echo '用户名已被注册';
else
  echo '用户名可用';
Copy after login


The calling format is as follows:


url = 'abc.php';
var jsonData={username:'acme',passw:'acme'};
ajaxText(url,jsonData,getMsg);
function getMsg(msg)
{
 //do something
}
Copy after login
Copy after login


2.XML format

returns an XML DOM object, and parsing the data in it is similar to HTML DOM programming. For example, getting the tag object through name ( Array form), then obtain the required label object from the array, and then obtain the text value from the label object.
The function is as follows:


/**
 * @function 利用ajax动态交换数据(XML格式)
 * @param url  要提交请求的页面
 * @param jsonData 要提交的数据,利用Json传递
 * @param tagName 要获取值的标签名
 * @param getMsg 这个函数可以获取到处理后的数据
 */
function ajaxXML(url,jsonData,tagName,getMsg)
{
  //创建Ajax对象,ActiveXObject兼容IE5,6
  var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
  //打开请求
  oAjax.open('POST',url,true);//方法,URL,异步传输
  //发送请求
  var data = '';
  for(var d in jsonData)  //拼装数据
    data += (d + '=' +jsonData[d] + '&');
  oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  oAjax.send(data);
  //接收返回,当服务器有东西返回时触发
  oAjax.onreadystatechange = function ()
  {
    if(oAjax.readyState == 4 && oAjax.status == 200)
    {
      var oXml = oAjax.responseXML; //返回的是一个XML DOM对象
      var oTag = oXml.getElementsByTagName(tagName);
      var tagValue = oTag[0].childNodes[0].nodeValue;
      if(getMsg)getMsg(tagValue);
    }
  }
}
Copy after login


The data format returned by the server is as follows:
For example:


//返回的是xml格式
header("Content-Type:text/xml;charset=utf-8");
//返回的是text或Json格式
//header("Content-Type:text/html;charset=utf-8");
//禁用缓存,是为了数据一样的前提下还能正常提交,而不是缓存数据
header("Cache-Control:no-cache");
$username = $_POST['username']; //获取用户名
if(empty($username))
  echo &#39;<user><mes>请输入用户名</mes></user>&#39;; //这些标签可以自定义
else if($username == &#39;acme&#39;)
  echo &#39;<user><mes>用户名已被注册</mes></user>&#39;;
else
  echo &#39;<user><mes>用户名可用</mes></user>&#39;;
Copy after login


The calling format is as follows:


var url = &#39;abc.php&#39;;
var jsonData = {username:&#39;acme&#39;};
ajaxXML(url,jsonData,&#39;mes&#39;,getMsg);
function getMsg(msg)
 {
   //do something
 }
Copy after login


3. Return json

The function is as follows:


/**
 * @function 利用ajax动态交换数据(Text/HTML格式),但是返回的是Json类型的文本数据
 * @param url  要提交请求的页面
 * @param jsonData 要提交的数据,利用Json传递
 * @param getMsg 这个函数可以获取到处理后的数据
 */
function ajaxJson(url,jsonData,getMsg)
{
  //创建Ajax对象,ActiveXObject兼容IE5,6
  var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
  //打开请求
  oAjax.open(&#39;POST&#39;,url,true);//方法,URL,异步传输
  //发送请求
  var data = &#39;&#39;;
  for(var d in jsonData)  //拼装数据
    data += (d + &#39;=&#39; +jsonData[d] + &#39;&&#39;);
  oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  oAjax.send(data);
  //接收返回,当服务器有东西返回时触发
  oAjax.onreadystatechange = function ()
  {
    if(oAjax.readyState == 4 && oAjax.status == 200)
    {
      var json = eval(&#39;(&#39;+oAjax.responseText+&#39;)&#39;);//把传回来的字符串解析成json对象
      if(getMsg)getMsg(json);
    }
  }
}
Copy after login


The data format returned by the server is as follows:

For example:


//返回的是xml格式
//header("Content-Type:text/xml;charset=utf-8");
//返回的是text或Json格式
header("Content-Type:text/html;charset=utf-8");
//禁用缓存,是为了数据一样的前提下还能正常提交,而不是缓存数据
header("Cache-Control:no-cache");
$username = $_POST[&#39;username&#39;]; //获取用户名
if(empty($username))
  echo &#39;{"mes":"请输入用户名"}&#39;;
else if($username == &#39;acme&#39;)
  echo &#39;{"mes":"用户名已被注册"}&#39;;
else
  echo &#39;{"mes":"用户名可用"}&#39;;
Copy after login


The calling format is as follows:


url = &#39;abc.php&#39;;
var jsonData={username:&#39;acme&#39;,passw:&#39;acme&#39;};
ajaxText(url,jsonData,getMsg);
function getMsg(msg)
{
 //do something
}
Copy after login
Copy after login


For ease of use, the three functions can be combined .The merged function is as follows:


/**
 * @function 利用ajax动态交换数据
 * @param url  要提交请求的页面
 * @param jsonData 要提交的数据,利用Json传递
 * @param getMsg 这个函数可以获取到处理后的数据
 * @param type  接受的数据类型,text/xml/json
 * @param tagName type = xml 的时候这个参数设置为要获取的文本的标签名
 * @return 无
 */
function ajax(url,jsonData,getMsg,type,tagName)
{
  //创建Ajax对象,ActiveXObject兼容IE5,6
  var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
  //打开请求
  oAjax.open(&#39;POST&#39;,url,true);//方法,URL,异步传输
  //发送请求
  var data = &#39;&#39;;
  for(var d in jsonData)  //拼装数据
    data += (d + &#39;=&#39; +jsonData[d]+&#39;&&#39;);
  oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  oAjax.send(data);
  //接收返回,当服务器有东西返回时触发
  oAjax.onreadystatechange = function ()
  {
    if(oAjax.readyState == 4 && oAjax.status == 200)
    {
      if(type == &#39;text&#39;)
      {
        if(getMsg) getMsg(oAjax.responseText);
      }
      else if(type == &#39;json&#39;)
      {
        var json = eval(&#39;(&#39;+oAjax.responseText+&#39;)&#39;);//把传回来的字符串解析成json对象
        if(getMsg)getMsg(json);
      }
      else if(type == &#39;xml&#39;)
      {
        var oXml = oAjax.responseXML; //返回的是一个XML DOM对象
        var oTag = oXml.getElementsByTagName(tagName);
        var tagValue = oTag[0].childNodes[0].nodeValue;
        if(getMsg)getMsg(tagValue);
      }

    }
  }
}
Copy after login


The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope that Please support PHP Chinese website.

Related recommendations:

Detailed example of jQuery Ajax using Token to verify identity

Interaction between front-end ajax and back-end Detailed explanation

Native ajax waterfall flow demo example sharing

The above is the detailed content of Ajax processing three data types returned by the server. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Solution to the inability to connect to the RPC server and the inability to enter the desktop Solution to the inability to connect to the RPC server and the inability to enter the desktop Feb 18, 2024 am 10:34 AM

What should I do if the RPC server is unavailable and cannot be accessed on the desktop? In recent years, computers and the Internet have penetrated into every corner of our lives. As a technology for centralized computing and resource sharing, Remote Procedure Call (RPC) plays a vital role in network communication. However, sometimes we may encounter a situation where the RPC server is unavailable, resulting in the inability to enter the desktop. This article will describe some of the possible causes of this problem and provide solutions. First, we need to understand why the RPC server is unavailable. RPC server is a

Detailed explanation of CentOS installation fuse and CentOS installation server Detailed explanation of CentOS installation fuse and CentOS installation server Feb 13, 2024 pm 08:40 PM

As a LINUX user, we often need to install various software and servers on CentOS. This article will introduce in detail how to install fuse and set up a server on CentOS to help you complete the related operations smoothly. CentOS installation fuseFuse is a user space file system framework that allows unprivileged users to access and operate the file system through a customized file system. Installing fuse on CentOS is very simple, just follow the following steps: 1. Open the terminal and Log in as root user. 2. Use the following command to install the fuse package: ```yuminstallfuse3. Confirm the prompts during the installation process and enter `y` to continue. 4. Installation completed

How to configure Dnsmasq as a DHCP relay server How to configure Dnsmasq as a DHCP relay server Mar 21, 2024 am 08:50 AM

The role of a DHCP relay is to forward received DHCP packets to another DHCP server on the network, even if the two servers are on different subnets. By using a DHCP relay, you can deploy a centralized DHCP server in the network center and use it to dynamically assign IP addresses to all network subnets/VLANs. Dnsmasq is a commonly used DNS and DHCP protocol server that can be configured as a DHCP relay server to help manage dynamic host configurations in the network. In this article, we will show you how to configure dnsmasq as a DHCP relay server. Content Topics: Network Topology Configuring Static IP Addresses on a DHCP Relay D on a Centralized DHCP Server

Best Practice Guide for Building IP Proxy Servers with PHP Best Practice Guide for Building IP Proxy Servers with PHP Mar 11, 2024 am 08:36 AM

In network data transmission, IP proxy servers play an important role, helping users hide their real IP addresses, protect privacy, and improve access speeds. In this article, we will introduce the best practice guide on how to build an IP proxy server with PHP and provide specific code examples. What is an IP proxy server? An IP proxy server is an intermediate server located between the user and the target server. It acts as a transfer station between the user and the target server, forwarding the user's requests and responses. By using an IP proxy server

How to solve the 403 error encountered by jQuery AJAX request How to solve the 403 error encountered by jQuery AJAX request Feb 20, 2024 am 10:07 AM

Title: Methods and code examples to resolve 403 errors in jQuery AJAX requests. The 403 error refers to a request that the server prohibits access to a resource. This error usually occurs because the request lacks permissions or is rejected by the server. When making jQueryAJAX requests, you sometimes encounter this situation. This article will introduce how to solve this problem and provide code examples. Solution: Check permissions: First ensure that the requested URL address is correct and verify that you have sufficient permissions to access the resource.

What should I do if I can't enter the game when the epic server is offline? Solution to why Epic cannot enter the game offline What should I do if I can't enter the game when the epic server is offline? Solution to why Epic cannot enter the game offline Mar 13, 2024 pm 04:40 PM

What should I do if I can’t enter the game when the epic server is offline? This problem must have been encountered by many friends. When this prompt appears, the genuine game cannot be started. This problem is usually caused by interference from the network and security software. So how should it be solved? The editor of this issue will explain I would like to share the solution with you, I hope today’s software tutorial can help you solve the problem. What to do if the epic server cannot enter the game when it is offline: 1. It may be interfered by security software. Close the game platform and security software and then restart. 2. The second is that the network fluctuates too much. Try restarting the router to see if it works. If the conditions are OK, you can try to use the 5g mobile network to operate. 3. Then there may be more

How to solve jQuery AJAX request 403 error How to solve jQuery AJAX request 403 error Feb 19, 2024 pm 05:55 PM

jQuery is a popular JavaScript library used to simplify client-side development. AJAX is a technology that sends asynchronous requests and interacts with the server without reloading the entire web page. However, when using jQuery to make AJAX requests, you sometimes encounter 403 errors. 403 errors are usually server-denied access errors, possibly due to security policy or permission issues. In this article, we will discuss how to resolve jQueryAJAX request encountering 403 error

PHP and Ajax: Building an autocomplete suggestion engine PHP and Ajax: Building an autocomplete suggestion engine Jun 02, 2024 pm 08:39 PM

Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.

See all articles